在angularjs中使用复选框来管理对象的数组

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

导读：我问过一个问题 How to associate objects as models using ng-options in angularjs. 我得到了一个非常快的答案.我的后续问题是答复使用 select mutiple来处理子对象数组. 使用 select可以看到我想要的工作示例.在http://plnkr.co/edit/FQQxrSE89iY1BnfumK0

我问过一个问题
How to associate objects as models using ng-options in angularjs.

我得到了一个非常快的答案.我的后续问题是答复使用< select mutiple>来处理子对象数组.

使用< select>可以看到我想要的工作示例.在http://plnkr.co/edit/FQQxrSE89iY1BnfumK0A?p=preview

如何使用< input type ='checkbox'> (而不是< select>)来处理该对象数组,即ng：model =“shirt.colors”,同时从颜色对象数组重复项.

原因,这显得如此复杂,我必须管理数组的数组,而不是数组的数组…例如,如果你看着小提琴,有颜色的对象和衬衫对象有多种颜色.

如果颜色对象改变,它应该改变衬衫对象中相应的颜色对象.

先谢谢你.

您只需要在作用域中使用一些中间值,并将复选框绑定到该值.在你的控制器 – 看它的变化,并手动重建衬衫颜色,根据它的价值.

<div ng-repeat='shirt in shirts'>
  <h3>Shirt.</h3>
  <label>Size: <input ng-model='shirt.size'></label><br/>
  <label>Colors:</label>
  <label ng-repeat="color in colors">
    {{color.label}} <input ng-model="selection[$parent.$index][$index]" type="checkbox"/>
  </label>

    </label>
</div>

在你的控制器中：

$scope.selection = [[],[]];
$scope.$watch('selection',function () {
  console.log('change',$scope.selection);
  angular.forEach($scope.selection,function (shirtSelection,index) {
    $scope.shirts[index].colors = [];
    angular.forEach(shirtSelection,function (value,index2) {
      if (value) $scope.shirts[index].colors.push($scope.colors[index2]);
    });
  });
},true);

你可以在这里测试：http://plnkr.co/edit/lh9hTa9wM5fkh3nT09RJ?p=preview

（编辑：李大同）

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