angular js为数组添加复选框的值

Question

我有这个代码:

<tr ng-repeat="doc in providers">      
  <td><input type="checkbox" ng-true-value="{{doc.provider.Id}}" ng-false-value="" ng-model="ids"></td> 
</tr>

{{ids}}

我想获取数组上复选框的值

Answer 1

ng-true-value只接受字符串,所以你需要使用一种解决方法.这已成为一段时间的功能请求.在此期间,您可以这样做:

ids在控制器中创建一个对象,如:

$scope.ids = {};

并更改ng-model为引用该对象中的键.您可以使用默认true/false复选框值:

<td><input type="checkbox" ng-model="ids[doc.provider.Id]"></td>

然后你可以循环ids检查键true.

这是一个小提琴

Answer 2

我发现这个指令提供了我正在寻找的功能.我遇到的更常见的解决方案的主要问题是我有两个数组,我需要存储与多选列表兼容的数据.checklistModel指令提供了这个非常基本的功能,可以使用多个模型.

Answer 3

我将首先说我真的不喜欢角度来做这个选项.我甚至不能说这比接受的答案更好,但它确实将数据保存在模型中.

标记:

<tr ng-repeat='(index, doc) in provider'>
    <td><input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' /></td>
</tr>

<span ng-repeat='id in ids'>{{id}} </span>

现在只需$监视数组值并在控制器中更改时进行过滤(确保传递对象相等参数):

$scope.ids = [];

$scope.updateIds = function() {
    $scope.ids = $scope.ids.filter(function(id) {
        return !!id;
    });
};

$scope.$watch('ids', $scope.updateIds, true);

当我开始回答这个问题时,我认为最常用的选择是在输入上添加ng-change指令:

<input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' ng-change='updateIds()'/>

不幸的是,这不能按预期工作.删除值时,UI无法正确更新.我还想指出,你可以在没有repeat指令的情况下做到这一点:

<input type='checkbox' ng-true-value='1' ng-model='ids.0' />
<input type='checkbox' ng-true-value='2' ng-model='ids.1' />
<input type='checkbox' ng-true-value='3' ng-model='ids.2' />
<input type='checkbox' ng-true-value='4' ng-model='ids.3' />
<input type='checkbox' ng-true-value='5' ng-model='ids.4' />
<input type='checkbox' ng-true-value='6' ng-model='ids.5' />

在这种情况下,$ watch肯定比为每个输入添加ng-change更好.最后,这是一个工作的plunkr.每次检查或取消选中一个框时,$ watch函数最终会运行两次,但实际上它必须如此!