blocks|key|206798|text|感谢Klaster_1给出了被接受的答案。在此基础上，我在复选框输入上使用ng-change来设置一个局部作用域变量，该变量将用作ng-required表达式。这可以防止在每个摘要上运行someSelected()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|206799|这里有一个演示：http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/|206800|这是供后人使用的HTML和JS。|206801|<!DOCTYPE+html>
<html+ng-app="App">

<head>
++<meta+charset="utf-8"+/>
++<script+data-require="angular.js@1.4.9"+data-semver="1.4.9"+src="https://code.angularjs.org/1.4.9/angular.js"></script>
++<script+src="script.js"></script>
</head>

<body>
++<div+ng-controller="AppCtrl">
++++<form+class="Scroller-Container"+name="multipleCheckbox"+novalidate="">
++++++<h3>What+would+you+like?</h3>
++++++<div+ng-repeat="fruit+in+fruits">
++++++++<input+type="checkbox"+ng-model="formData.selectedFruits[fruit.name]"+ng-change="checkboxChanged()"+ng-required="!someSelected"+/>+{{fruit.name}}
++++++</div>
++++++<p+style="color:+red;"+ng-show="multipleCheckbox.$error.required">You+must+choose+one+fruit</p>
++++</form>
++++<pre>Fruits+model:
{{formData.selectedFruits+%7C+json}}</pre>
++</div>
</body>

</html>|code-block|syntax|javascript|206802|angular
++.module('App',+[])
++.controller('AppCtrl',+function($scope)+{

++++var+selectedFruits+=+{
++++++Mango:+true
++++};

++++var+calculateSomeSelected+=+function()+{
++++++$scope.someSelected+=+Object.keys(selectedFruits).some(function(key)+{
++++++++return+selectedFruits[key];
++++++});
++++};

++++$scope.formData+=+{
++++++selectedFruits:+selectedFruits
++++};

++++$scope.fruits+=+[{
++++++'name':+'Apple'
++++},+{
++++++'name':+'Orange'
++++},+{
++++++'name':+'Banana'
++++},+{
++++++'name':+'Mango'
++++}];

++++$scope.checkboxChanged+=+calculateSomeSelected;

++++calculateSomeSelected();
++});|206803|entityMap|0|LINK|mutability|MUTABLE|url|http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/^0|11|9|1T|B|2L|E|0|8|17|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1A|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|Q|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>Thanks to Klaster_1 for the accepted answer. I've built on this by using <code>ng-change</code> on the checkbox inputs to set a local scope variable, which would be used as the <code>ng-required</code> expression. This prevents the running of <code>someSelected()</code> on every digest.</p>

<p>Here is a plunkr demonstrating this: <a href="http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/" rel="nofollow">http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/</a></p>

<p>Here is the HTML and JS for posterity.</p>



<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="App"&gt;

&lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;script data-require="angular.js@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"&gt;&lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div ng-controller="AppCtrl"&gt;
    &lt;form class="Scroller-Container" name="multipleCheckbox" novalidate=""&gt;
      &lt;h3&gt;What would you like?&lt;/h3&gt;
      &lt;div ng-repeat="fruit in fruits"&gt;
        &lt;input type="checkbox" ng-model="formData.selectedFruits[fruit.name]" ng-change="checkboxChanged()" ng-required="!someSelected" /&gt; {{fruit.name}}
      &lt;/div&gt;
      &lt;p style="color: red;" ng-show="multipleCheckbox.$error.required"&gt;You must choose one fruit&lt;/p&gt;
    &lt;/form&gt;
    &lt;pre&gt;Fruits model:
{{formData.selectedFruits | json}}&lt;/pre&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>



<pre><code>angular
  .module('App', [])
  .controller('AppCtrl', function($scope) {

    var selectedFruits = {
      Mango: true
    };

    var calculateSomeSelected = function() {
      $scope.someSelected = Object.keys(selectedFruits).some(function(key) {
        return selectedFruits[key];
      });
    };

    $scope.formData = {
      selectedFruits: selectedFruits
    };

    $scope.fruits = [{
      'name': 'Apple'
    }, {
      'name': 'Orange'
    }, {
      'name': 'Banana'
    }, {
      'name': 'Mango'
    }];

    $scope.checkboxChanged = calculateSomeSelected;

    calculateSomeSelected();
  });
</code></pre>


blocks|key|4712862|text|我们可以在不遍历所有复选框实例的情况下满足您的要求。以下是示例代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4712863|<script>
angular.module('atLeastOneExample',+[])
.controller('ExampleController',+['$scope',+function($scope)+{
++$scope.e+=+function(s){
++++eval(s);
++};
}]);
</script>|code-block|syntax|javascript|4712864|这里我将javascript+eval函数包装在"e“函数中以访问它。|4712865|<form+name="myForm"+ng-controller="ExampleController"+ng-init="c=0">
++<label>
++++++Value1:+<input+type="checkbox"+ng-model="checkboxModel.value[0]"+ng-change="e('($scope.checkboxModel.value[0])?$scope.c%2B%2B:$scope.c--')"/>
++</label><br/>
++<label>
++++++Value2:+<input+type="checkbox"+ng-model="checkboxModel.value[1]"+ng-change="e('($scope.checkboxModel.value[1])?$scope.c%2B%2B:$scope.c--')"/>
++</label><br/>
++value+=+{{checkboxModel.value}}<br/>
++isAtLeastOneChecked+=+{{c>0}}
</form>|4712866|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>We can achieve your requirement without traversing all check-boxes instance.
Here is the sample code</p>

<pre><code>&lt;script&gt;
angular.module('atLeastOneExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.e = function(s){
    eval(s);
  };
}]);
&lt;/script&gt;
</code></pre>

<p>Here i am wrapping javascript eval function in "e" function to access it.</p>

<pre><code>&lt;form name="myForm" ng-controller="ExampleController" ng-init="c=0"&gt;
  &lt;label&gt;
      Value1: &lt;input type="checkbox" ng-model="checkboxModel.value[0]" ng-change="e('($scope.checkboxModel.value[0])?$scope.c++:$scope.c--')"/&gt;
  &lt;/label&gt;&lt;br/&gt;
  &lt;label&gt;
      Value2: &lt;input type="checkbox" ng-model="checkboxModel.value[1]" ng-change="e('($scope.checkboxModel.value[1])?$scope.c++:$scope.c--')"/&gt;
  &lt;/label&gt;&lt;br/&gt;
  value = {{checkboxModel.value}}&lt;br/&gt;
  isAtLeastOneChecked = {{c&gt;0}}
&lt;/form&gt;
</code></pre>


blocks|key|4712898|text|好吧，也许聚会来晚了，但如果你有一个对象数组，那么只检查所选对象数组的长度对我来说是可行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4712899|HTML|4712900|<div+ng-repeat="vehicle+in+vehicles">
++++<input+type="checkbox"+name="car"+ng-model="car.ids[vehicle._id]"+ng-required="+car.objects.length+<=+0">+{{vehicle.model}}+{{vehicle.brand}}+<b>{{vehicle.geofenceName}}</b>
</div>|code-block|syntax|javascript|4712901|JS|4712902|$scope.vehicles+=+[{},{}]+//+Your+array+of+objects;
$scope.car+=+{
++++ids:+{},
++++objects:+[]
};

$scope.$watch(function()+{
++++return+$scope.car.ids;
},+function(value)+{
++++$scope.car.objects+=+[];
++++angular.forEach($scope.car.ids,+function(value,+key)+{
++++++++value+&&+$scope.car.objects.push(getCategoryById(key));
++++});
},+true);

function+getCategoryById(id)+{
++++for+(var+i+=+0;+i+<+$scope.vehicles.length;+i%2B%2B)+{
++++++++if+($scope.vehicles[i]._id+==+id)+{
++++++++++++return+$scope.vehicles[i];
++++++++}
++++}
}|4712903|我知道在这个解决方案中发生了什么，您正在检查所有复选框选项，以了解哪个选项被单击。但据我所知，这是到目前为止最简单的解决方案(易于理解和实现)，如果你知道你的选择将是有限的，它就像一个护身符。以获得更多时间优化的解决方案。检查上面的答案。|4712904|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Okay maybe very late to the party but if you have an array of objects which you are looking at, the solution of just checking the length of array of selected objects worked for me.<br>
HTML  </p>

<pre><code>&lt;div ng-repeat="vehicle in vehicles"&gt;
    &lt;input type="checkbox" name="car" ng-model="car.ids[vehicle._id]" ng-required=" car.objects.length &lt;= 0"&gt; {{vehicle.model}} {{vehicle.brand}} &lt;b&gt;{{vehicle.geofenceName}}&lt;/b&gt;
&lt;/div&gt;
</code></pre>

<p>JS  </p>

<pre><code>$scope.vehicles = [{},{}] // Your array of objects;
$scope.car = {
    ids: {},
    objects: []
};

$scope.$watch(function() {
    return $scope.car.ids;
}, function(value) {
    $scope.car.objects = [];
    angular.forEach($scope.car.ids, function(value, key) {
        value &amp;&amp; $scope.car.objects.push(getCategoryById(key));
    });
}, true);

function getCategoryById(id) {
    for (var i = 0; i &lt; $scope.vehicles.length; i++) {
        if ($scope.vehicles[i]._id == id) {
            return $scope.vehicles[i];
        }
    }
}
</code></pre>

<p>I understand what is happening in this solution that you are checking all the checkbox options to know which one is clicked. But from what I know this is by far the easiest solution(to understand and implement) and it works like a charm if you know that your options will be limited. 
For a more time optimized solution. Check the answers above.  </p>


<p>I have a list of check boxes, of which at least one is compulsory. I have tried to achieve this via AngularJS validation, but had a hard time. Below is my code:</p>

<pre class="lang-js prettyprint-override"><code>// Code goes here for js 

var app = angular.module('App', []);

function Ctrl($scope) {
  $scope.formData = {};
  $scope.formData.selectedGender = '';
  $scope.gender = [{
    'name': 'Male',
    'id': 1
  }, {
    'name': 'Female',
    'id': 2
  }];
  $scope.formData.selectedFruits = {};
  $scope.fruits = [{
    'name': 'Apple',
    'id': 1
  }, {
    'name': 'Orange',
    'id': 2
  }, {
    'name': 'Banana',
    'id': 3
  }, {
    'name': 'Mango',
    'id': 4
  }, ];
  $scope.submitForm = function() {

  }
}
</code></pre>

<pre class="lang-html prettyprint-override"><code>// Code goes here for html
&lt;!doctype html&gt;
&lt;html ng-app="App"&gt;

&lt;head&gt;
  &lt;!-- css file --&gt;
  &lt;!--App file --&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"&gt;&lt;/script&gt;
  &lt;!-- External file --&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div ng-controller="Ctrl"&gt;
    &lt;form class="Scroller-Container"&gt;
      &lt;div ng-app&gt;

        &lt;form class="Scroller-Container" ng-submit="submit()" ng-controller="Ctrl"&gt;
          &lt;div&gt;
            What would you like?
            &lt;div ng-repeat="(key, val) in fruits"&gt;
              &lt;input type="checkbox" ng-model="formData.selectedFruits[val.id]" name="group[]" id="group[{{val.id}}]" required /&gt;{{val.name}}
            &lt;/div&gt;
            &lt;br /&gt;
            &lt;div ng-repeat="(key, val) in gender"&gt;
              &lt;input type="radio" ng-model="$parent.formData.selectedGender" name="formData.selectedGender" id="{{val.id}}" value="{{val.id}}" required /&gt;{{val.name}}
            &lt;/div&gt;
            &lt;br /&gt;
          &lt;/div&gt;
          &lt;pre&gt;{{formData.selectedFruits}}&lt;/pre&gt;
          &lt;input type="submit" id="submit" value="Submit" /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;br&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>Here is the code in plunker: <a href="http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview">http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview</a> Has anyone done this on AngularJS? Making the checkboxes required, forces me to select all the checkbox values. This problem is also not documented in the AngularJS documentation.</p>


AngularJS group check box validation

我有一个复选框列表，其中至少有一个是必选的。我曾尝试通过AngularJS验证来实现这一点，但遇到了困难。下面是我的代码：// Code goes here for js var app = angular.module('App', []);function Ctrl($scope) {  $scope.formDa...

问AngularJS组复选框验证
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS组复选框验证EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS组复选框验证
EN