AngularJS:检测ngRepeat中哪个复选框被选中/未选中，并调用一个函数

AngularJS: Detecting which checkbox in an ngRepeat is checked/unchecked and calling a function

本文关键字：调用 函数 一个 检测 复选框 AngularJS ngRepeat      更新时间：2023-09-26

我想我正在尝试在Angular中做一些相对简单的事情，但由于某种原因，我无法完全理解ngClick, ngModel, ngChange或ngChecked来解决它。

我有一大堆重复的复选框当一个被选中时，函数会提醒一个东西当它未被选中时，函数会提醒另一个东西。下面是一些伪代码:

HTML: 

<div id="topic" ng-repeat="50 times">
    <input type='checkbox' ng-model='???' ng-click='myFunc($index)' />
</div>

脚本:

function myFunc(index) {
    if (checkbox == checked) {
      alert('checkbox ' + index + 'checked!');
    }
    else {
      alert('checkbox' + index + 'unchecked!');
    }
}

所以问题是我不知道如何分辨repeat中的哪个复选框是选中的，什么时候是未选中的。有人有什么想法吗?

你需要一个控制器的帮助…

我会这样做:

在$scope上初始化一个空的值数组和一个在更改时使用的函数。

$scope.checkboxes = [];
$scope.alert = function(index, event){
  alert("checkbox " + index + " is " + $scope.checkbox[index]);
}

将ng-model绑定到checkboxes[$index]，然后您可以使用ng-change，因为您已经指定了一个模型。

<input type="checkbox" 
       ng-model="checkbox[$index]" 
       ng-change="alert($index)">

看这个活塞

Ng-model在ng-click之后被调用。你可以在ng-click上清除模型，就完成了。n -model将在点击

后显示该值

Javascript代码:

 for (var i = 0; i < $scope.sunday_workshop.length; i++) {              
                $scope.sunday_workshop[i].flag = false;                 
            }
HTML代码:

 <div ng-repeat="workshop in sunday_workshop">
                        <input type="checkbox" name="sun_workshop" ng-checked="workshop.flag" ng-model="workshop.flag" ng-click="workshop_method('sunday')"> {{workshop.WS_Option}}

相关文章：