数组 – 如何在AngularJS中向数组添加复选框值？

发布时间：2020-12-17 17:53:34 所属栏目：安全来源：网络整理

导读：有人帮帮我！假设我有一个复选框列表,每个复选框都有一个ID. 我想使用选中的复选框ID对$范围进行范围调整. div ng-app="myapp"div ng-controller="ctrlParent" table tr ng-repeat="(key,value) in providers" tdinput type="checkbox" ng-model="ids[value

有人帮帮我！
假设我有一个复选框列表,每个复选框都有一个ID.
我想使用选中的复选框ID对$范围进行范围调整.

<div ng-app="myapp">
<div ng-controller="ctrlParent">
    <table>           
    <tr ng-repeat="(key,value) in providers">
        <td><input type="checkbox" ng-model="ids[value.Id]">  {{value}} </td>
    </tr>            
    </table>
    {{ids}}
</div>

而我的控制器：

var app = angular.module('myapp',[]);

app.controller('ctrlParent',function($scope){
    $scope.providers = [{Id:5},{Id:6},{Id:8},{Id:10}];
    $scope.ids = {};
});

现在我的数组输出(如果选中所有复选框)是：{“5”：true,“6”：true,“8”：true,“10”：true}

我希望：[{Id：5},{Id：6},{Id：8},{Id：10}]

解决方法

这是一个可能的解决方案：

<input type="checkbox" ng-model="ids[$index]" ng-true-value="
        {{value}}" ng-false-value="{{undefined}}"/>{{value}}

这样,您将拥有一个对象数组,因为您正在分配ID [$index] = value.

但是有一个缺点：当你仔细检查一个复选框时,你会在数组中有一个空元素.

var app = angular.module('myapp',function($scope) {
  $scope.providers = [{
    Id: 5
  },{
    Id: 6
  },{
    Id: 8
  },{
    Id: 10
  }];
  $scope.ids = [];

  $scope.$watchCollection('ids',function(newVal) {
    for (var i = 0; i < newVal.length; ++i) {

      console.log(newVal[i]);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp">
  <div ng-controller="ctrlParent">
    <table>
      <tr ng-repeat="(key,value) in providers">
        <td>
          <input type="checkbox" ng-model="ids[$index]" ng-true-value="{{value}}" ng-false-value="{{undefined}}" />{{value}}
        </td>
      </tr>
    </table>{{ids}}</div>
</div>

http://jsfiddle.net/b9jj0re2/3/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!