具有反向操作的角度核对表模型复选框

时间:2015-06-16 11:37:39

标签: javascript angularjs checkbox reverse

我正在使用checklist-model.js for angular来从动态生成的对象列表中进行选择。它工作正常,但现在我需要让它反向工作,所以当我取消选中任何复选框时 - 将它放到新数组(当检查回来时 - 从数组中删除)。你能不能给我一些想法或告诉我下一步如何处理它?<​​/ p>

HTML:

<label>
    <input type="checkbox"
        ng-model="check_all_domains"
        ng-click="toggle_select_all()"/> all
</label>
<label ng-repeat="objects in objects_model">
    <input type="checkbox"
        checklist-model="objects_selected"
        checklist-value="objects"
        ng-checked="check_all_domains"/>
    {{objects.name}}
</label>

模型:

$scope.objects_model = [
    {id : '1', name: 'name1'},
    {id : '2', name: 'name2'},
    {id : '3', name: 'name3'},
  ];
$scope.objects_selected = [];
$scope.check_all_domains = false;

$scope.toggle_select_all = function() {
    $scope.objects_selected = [];
};

这里是截图现在正在工作

的截图

enter image description here

这是我希望它如何工作:

enter image description here

更新:工作应该DEMO

2 个答案:

答案 0 :(得分:0)

我在清单模型方面遇到了类似的问题,我设法创建了一个解决方法

虽然它是一个非常讨厌的解决方案,但它确实有效:

$scope.toggle_select_all = function() {
   $timeout(function() {
       $scope.check_all_domains = $scope.check_all_domains ? false : true;
   });

   if (!$scope.check_all_domains) {
      angular.copy($scope.objects_model, $scope.objects_selected);
   } else {
      angular.copy([], $scope.objects_selected);
   }
};

请参阅此plunkr:http://plnkr.co/edit/CiXO1debaDkKPHPYKNfT?p=preview

我强烈建议您寻找替代方案,因为稍后您会发现它会得到回报。

对我来说这很有效:http://jsfiddle.net/cjwprostar/M4vGj/6/ - Chris Waguespack

来源:https://groups.google.com/forum/#!topic/angular/KMS5hXn1OCI

答案 1 :(得分:0)

更新了我的 demo ,以便查看最终结果

<label ng-repeat="objects in objects_model" class="test">
    <input type="checkbox" 
          checklist-model="objects_selected" 
          checklist-value="objects" />
    <i ng-class="{checked : check_all_domains, 
                unchecked : !check_all_domains, 
                fakecheck : check_all_domains}"></i>{{objects.name}}
  </label>
相关问题