如何为Angular中动态创建的复选框定义模型

Question

我正在创建一个用户表，我想在其中添加每行一个复选框和一个删除按钮。 当我单击删除按钮时，我要删除所有选中的用户。

现在，我将从API响应中创建这些用户条目，该响应给出了ID，名称和电子邮件。

所以我的观点看起来像这样：

<tr ng-repeat="user in MyCntrl.data.users track by $index">
     <td><input type="checkbox"></td>
     <td>{{user.name}}</td>
     <td>{{user.email}}</td>
</tr>

我想要在控制器中创建一个对象，该对象的ID是单击了其复选框的所有用户的ID。

即使创建对象并将其分配为复选框的模型，如何在该对象中添加键作为ID？

Answer 1

您可以简单地<input type="checkbox" ng-model="user.isSelected">

然后仅过滤具有isSelected === true MyCntrl.data.users

Answer 2

由于JavaScript动态类型化的本质，没有什么可以阻止您向模型添加名为“ isSelected”（或类似名称）的字段。 然后，您可以将ng-model="user.isSelected"到您的checkbox标签中。 然后，在删除时，检查将isSelected设置为true的条目并将其删除。

Answer 3

这是有关如何跟踪另一个阵列中所有选定用户的示例：

示例： Plunker

<tr ng-repeat="user in MyCntrl.data.users track by $index">
     <td><input type="checkbox" ng-model="tempVar" ng-click="toggleSelection($index)"></td>
     <td>{{user.name}}</td>
     <td>{{user.email}}</td>
</tr>

<!-- AngularJS Code -->
<script type="text/javascript">
var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope) {
  $scope.selectedUsers = []; // initially the selected users array is empty 
  $scope.toggleSelection = function(index){
    var positionInSelectedArray;
    var arr = $scope.MyCntrl.data.users;
    var tempUser = arr[index]; // refers to the selected user object in $scope.MyCntrl.data.users array (further, we'll call it "arr")


    var userAlreadySelected = $scope.selectedUsers.filter(function( obj ) {
      return obj.userId == tempUser.userId;
    })[0]; //checks whether the user is already selected or not (if selected, then returns the user object)
    if (angular.isUndefined(userAlreadySelected)) {
         $scope.selectedUsers.push(tempUser); //insert the object in array containing selected users
    }else{
        positionInSelectedArray = $scope.selectedUsers.indexOf(userAlreadySelected);
        $scope.selectedUsers.splice(positionInSelectedArray, 1); //removes the user object from array containing selected users
    }
  };
});
</script>