Question

您好我在angularjs中有表单，并且该表单在点击第一个复选框时有很多复选框i，请选中所有我要检查所有复选框。我怎么能用角度为每个字段循环这里做我的示例代码我尝试在代码片段。

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;
  });
}

更好（只是装饰此行为应适用的复选框）

创建一个支持＆＃34; SelectAll＆＃34;当事件被提出时，事件并将selectAllListener值更新为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>

Answer 2

为表单构建一个对象，其中isChecked键表示复选框值，name表示标签，value表示输入的模型或值。

$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;
    });
};

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

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

2 个答案: