检查了angularjs中表单的所有复选框

Question

嗨，我在 angularjs 中有表单，并且该表单在单击第一个复选框时有很多复选框，即选中所有我想选中的所有复选框。我怎么能用角度为每个字段循环做到这一点这是我在代码片段中尝试的示例代码。

vm.asas = function() {
  angular.forEach($scope.quizSettingsForm, function(field) {
    console.log(field);
    angular.forEach(field, function(errorField) {
      errorField.$setTouched();
    });
  });
  console.log(vm.QuizSettings);
};

<form name="quizSettingsForm" novalidate>
  <div class="panel panel-default">
    <div class="panel-heading">
      QUIZ SETTINGS
    </div>
    <div class="panel-body">
      <ul>
        <li>
          <div class="checkbox">
            <input type="checkbox" id="checkall" ng-model="vm.checkAll" ng-click="vm.asas()" />
            <label for="checkall">Check /Uncheck ALL</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <input type="checkbox" ng-model="vm.QuizSettings.IsOpened" id="Cohort" />
            <label for="Cohort">Have a open Quiz</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <input type="checkbox" ng-model="vm.QuizSettings.IsMandatory" id="mandatory" />
            <label for="mandatory">Is Mandatory</label>
          </div>
        </li>
        <li>
          <div class="checkbox counterdiv">
            <input type="checkbox" ng-model="vm.QuizSettings.ShouldExpireAfterExpiry" id="invitation" />
            <label for="invitation">  <p>The quiz will expire <input type="number" ng-model="vm.QuizSettings.Expiry" ng-min="1" name="expiry"> days after invitation</p></label>
            <span class="validation-message" ng-show=" vm.QuizSettings.ShouldExpireAfterExpiry && quizSettingsForm.expiry.$touched && quizSettingsForm.expiry.$error.min"><i class="fa fa-warning"></i> The minimum value is 1.</span>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <input type="checkbox" ng-model="vm.QuizSettings.AllowRetakes" id="dontallow" />
            <label for="dontallow">Allow Retake and dont allow more than </label>
            <input type="number" ng-model="vm.QuizSettings.AlllowMoreThen" ng-min="1" name="dontallow"><span style="color: #696969;font-size: 18px;font-weight: normal;"> Retakes </span>
            <span class="validation-message" ng-show="quizSettingsForm.dontallow.$touched && quizSettingsForm.dontallow.$error.min"><i class="fa fa-warning"></i> The minimum value is 1.</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</form>

Answer 1

一种方法（如果复选框属性与其他属性位于同一对象上）

您可以（不一定应该）将属性名称存储在数组中，然后您可以使用forEach 循环在vm.quizSettings 对象上设置属性本身：

function selectAll(){

  var myArray = [
    "IsOpened", 
    "IsMandatory", 
    "ShouldExpireAfterExpiry"
  ];

  angular.forEach(myArray, function(propName){
    vm.QuizSettings[propName] = true;
  });
}

好多了（如果复选框属性单独在同一个对象上）

如果您可以避免将属性名称存储为字符串，那就更好了。如果您要更新的所有复选框布尔属性都单独在它自己的对象上，那么它会变得更加清晰：

function selectAll(){
  var myArray = Object.keys(vm.QuizSettings);
  angular.forEach(myArray, function(propName){
    vm.QuizSettings[propName] = true;
  });
}

Better Still（只需装饰应应用此行为的复选框）

创建一个自定义指令selectAllListener，该指令侦听“SelectAll”事件并在引发该事件时将ngModel 值更新为true。

function thisDirective() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, el, attr, ngModel){
      scope.$on("SelectAll", function(){
        ngModel.$setViewValue(true);
        ngModel.$render();  
      });
    }
  }
}

将 select-all-listener 装饰器指令添加到您的复选框：

<li>
  <div class="checkbox" >
    <input select-all-listener type="checkbox" id="checkall" ng-model="vm.checkAll" ng-click="vm.asas()"/>
    <label for="checkall" >Check /Uncheck ALL</label>
  </div> 
</li>

从控制器中引发事件：

function selectAll(){
  $rootScope.$broadcast("SelectAll");
}

Answer 2

为您的表单构建一个对象，其中 isChecked 键是指复选框值，名称是指标签，值是指输入的模型或值。

$scope.FormAttributeList = [
    {
        id: 1,
        name: "xyz",
        value: "xyz",
        isChecked: false
    },
    {
        id: 2,
        name: "xyz",
        value: "xyz",
        isChecked: false
    },
    {
        id: 3,
        name: "xyz",
        value: "xyz",
        isChecked: false
    },
    {
        id: 4,
        name: "xyz",
        value: "xyz",
        isChecked: false
    }
]

your code will be like 

<div class="panel-body">
    <ul>
        <li>
           <div class="checkbox" >
                <input type="checkbox" id="checkall" ng-model="vm.checkAll" ng-click="selectAll(vm.checkAll,FormAttributeList)"/>
                <label for="checkall" >Check /Uncheck ALL</label>
            </div> 
        </li>
        <li ng-repeat="item in FormAttributeList">
            <div class="checkbox">
                <input type="checkbox" ng-model="item.value" id="item.id" />
                <label for="Cohort" >{{item.name}}</label>
            </div>
        </li>
</div>

Now create a function like 

$scope.selectAll = function(checkAll,List) {
    angular.forEach(list,function(value,key){
        value.isChecked = checkAll;
    });
};

这是做你想做的最好的方法，它会删除你不必要的代码。