使Angular复选框取消选中

时间:2016-09-08 11:24:12

标签: javascript angularjs

我有要求从数组我必须使用classes创建复选框列表。再次点击后将再次有一个重置按钮,所有选择将被重置,如何做到这一点谢谢

    $scope.classList=['Class1','Class2','Class3','Class4'];
$scope.selectedClasses={};
    $scope.selectedClasses.usall=false;
    $scope.selectedClasses.sall=false;          
    $scope.selectedClasses.classListchecked=false;
    $scope.getSubscribedClassList = function(classNam) {

            if(classNam==="All"){
                 $scope.selectedClasses.usall=false;
                 $scope.selectedClasses.classListchecked=false;
            }


                else{
                    $scope.selectedClasses.usall=false;
                    $scope.selectedClasses.sall=false;
                    $scope.selectedClasses.classListchecked.push(classNam)

            }
        }

以下是我的小提琴链接 http://jsfiddle.net/alokranjan39/49cc14yk/38/

3 个答案:

答案 0 :(得分:0)

我在你的小提琴上做了一些改变(在这里分叉 - http://jsfiddle.net/9Lv8gdr3/1/

HTML:

<div ng-controller="MyCtrl">

  <input type="checkbox" ng-model="masterSelect" ng-click="getSubscribedClassList('All')"> UnSelectAll

  <li ng-repeat="class in classList">
    <span>
                                                    <input type="checkbox" ng-model="class.isSelected" ng-disabled="class.students.length==0">
                                                    {{class.name}} </span>
  </li>
</div>

JavaScript的:

function MyCtrl($scope) {
  $scope.classList = [{
    isSelected: false,
    name: 'Class1'
  }, {
    isSelected: false,
    name: 'Class2'
  }, {
    isSelected: false,
    name: 'Class3'
  }, {
    isSelected: false,
    name: 'Class4'
  }];

  $scope.getSubscribedClassList = function(classNam) {

    if (classNam === "All") {
      angular.forEach($scope.classList, function(value, index) {       
        value.isSelected = $scope.masterSelect;       
      });
    } else {
      //you dont ideally need this. get the items with isSelected === true from $scope.classList to get the checked items

    }
  };
}

要获取所选项目的列表,只需循环浏览$scope.classList并获取isSelected === true

的项目

答案 1 :(得分:0)

更新了您的小提琴 - http://jsfiddle.net/49cc14yk/43/

HTML:

>>> if np.array([False, False]):
...   print 's'
... 
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: The truth value of an array with more than one element is ambiguous. Use a.any() or a.all()
>>> bool(np.array([False, False]))
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: The truth value of an array with more than one element is ambiguous. Use a.any() or a.all()
>>>
>>>
>>> bool(np.array([False, 232]))
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: The truth value of an array with more than one element is ambiguous. Use a.any() or a.all()
>>>
>>>
>>> bool(np.array([False, 232]).any())
True
>>> 

JS:

<div ng-controller="MyCtrl">
    <input type="checkbox" ng-model="selectedClasses" ng-click="getSubscribedClassList()">
    UnSelectAll                 

    <li ng-repeat="class in classList">
        <span>
            <input type="checkbox" ng-model="class.value">
                {{class.label}}
        </span>
    </li>
</div>

答案 2 :(得分:0)

还为数组更新了小提琴 - http://jsfiddle.net/49cc14yk/45/

HTML:

<div ng-controller="MyCtrl">
    <input type="checkbox" ng-model="selectAll" ng-click="getSubscribedClassList('ALL')">
    UnSelectAll                 
    <li ng-repeat="class in classList">
        <span>
            <input type="checkbox" name="selectedClasses[]" value="{{class}}"
            ng-checked="selectedClassList.indexOf(class) > -1" ng-click="getSubscribedClassList(class)">
            {{class}}
        </span>
    </li>
</div>

JS:

function MyCtrl($scope) {
    $scope.classList = ['Class1','Class2','Class3','Class4'];
    // Initialise below array as per your requirement, maybe blank
    $scope.selectedClassList = ['Class1','Class2'];

    $scope.getSubscribedClassList = function(value) {
        if(value == 'ALL') {
            $scope.selectedClassList = [];
            if($scope.selectAll) {
                $scope.selectedClassList = Object.create($scope.classList);
            }
        } else {
            var idx = $scope.selectedClassList.indexOf(value);
            if (idx > -1) {
                $scope.selectedClassList.splice(idx, 1);
            } else {
                $scope.selectedClassList.push(value);
            }
        }
    };
}

使用as作为对象更合适,所以保持这个答案