使用angularjs的多个可选复选框组

时间:2016-08-27 08:04:43

标签: angularjs angularjs-ng-repeat checkboxlist

有些时候我在angularjs中寻找多选复选框组选项。我无法在stackoverflow上找到自己,因为我已经开发了它并在这里分享js小提琴链接。

<div ng-app="check">
<div ng-controller="controller">
<ul>
    <li ng-repeat="(key, item) in basket"> {{item.type}}
      <ul>
        <li ng-repeat="(sub_catkey, sub_catval) in item.fields">
            <label>
              <input type="checkbox" ng-model="sub_catval.checked" /> {{sub_catval.name}}  -- {{sub_catval.checked}} | json
            </label>
        </li>
      </ul>
    </li>

</ul>
Selected show here
<li ng-repeat="(key, item) in basket"> {{item.type}}
  <ul>
    <li ng-repeat="(sub_catkey, sub_catval) in item.fields | filter: true">
      <label>
        {{sub_catval.name}}  -- {{sub_catval.checked}}
      </label>
    </li>
  </ul>
  </li>
    {Manager: {Name: filter.key}}
    {{basket}}

angular.module(&#39; check&#39;,[])     .controller(&#39; controller&#39;,function($ scope){

        $scope.basket = [
        {
        "type": "fruits",
        "fields": [
            {name: 'Apple', checked:false},
          {name: 'Mango', checked:true},
          {name: 'Banana', checked:false},
          {name: 'Guava', checked:false},
          {name: 'Orange', checked:false}
        ]
      },
      {
        "type": "flowers",
        "fields": [
            {name: 'rose', checked:true},
          {name: 'lilly', checked:false},
          {name: 'tulip', checked:false},
          {name: 'marigold', checked:false},
          {name: 'sunflower', checked:false}
        ]
      }
    ];

    $scope.selected = {
        fruits: ["Apple"],
        flowers: []
    };



     $scope.checkAll = function() {
         $scope.basket = angular.copy($scope.basket);
      };
      $scope.uncheckAll = function() {
          $scope.selected.fruits = [];
      };
});

http://jsfiddle.net/42y83eLb/

0 个答案:

没有答案