В AngularJS проверки группа проверки окно

У меня есть список флажков, из которых хотя бы один является обязательным. Я пытался добиться этого с помощью проверки в AngularJS, но было тяжело. Ниже мой код:

// 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 goes here for html
<!doctype html>
<html ng-app="App">

<head>
  <!-- css file -->
  <!--App file -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
  <!-- External file -->
</head>

<body>
  <div ng-controller="Ctrl">
    <form class="Scroller-Container">
      <div ng-app>

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

</html>

Вот код в plunker: http://plnkr.co/edit/Bz9yhSoPYUNzFDpfASwt?p=preview кто-нибудь делал это на AngularJS? Делая галочки требуется, вынуждает меня выбрать все значения флажка. Эта проблема также не задокументированные в в AngularJS документации.

T J
Редактировал вопрос 23-го мая 2016 в 7:57
Программирование
javascript jquery angularjs
28-го октября 2013 в 10:58
36 просмотров
Решение

Если вы хотите, чтобы по крайней мере один элемент в группе был выбран, он'можно определить динамические требуется атрибут НГ-требуется.

Для кнопки пол радио это будет легко:

<input
    type="radio"
    ng-model="formData.selectedGender"
    value="{{val.id}}"
    ng-required="!formData.selectedGender"
>

Группа чекбоксов было бы слишком легко, если вы используете массив для хранения некоторые фрукты (просто проверка длины массива), а с объекта он's необходимый, чтобы проверить, если любое из значений задано значение "true" с помощью фильтра или функции в контроллере:

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

в 

<input
    type="checkbox"
    value="{{val.id}}"
    ng-model="formData.selectedFruits[val.id]"
    ng-required="!someSelected(formData.selectedFruits)"
>

Обновление:

const someSelected = (object = {}) => Object.keys(object).some(key => object[key])

Также имейте в виду, что он будет возвращать false, если значение равно 0.

Klaster_1
Редактировал ответ 27-го января 2016 в 5:02
Комментарии (8)

Благодаря Klaster_1 принято отвечать. Я'вэ построен на этом с помощью НГ-изменить на флажок входы Настроить локальную переменную объем, который будет использоваться в качестве НГ-обязательно выражение. Это предотвращает запуск `someSelected () на каждый переварит.

Вот plunkr, демонстрирующий это: http://embed.plnkr.co/ScqA4aqno5XFSp9n3q6d/

Вот HTML и JS для потомков.

в 





  <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>



  <div ng-controller="AppCtrl">

      <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>

    <pre>Fruits model:
{{formData.selectedFruits | json}}</pre>
  </div>

в 

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();
  });
Комментарии (0)

Ладно, может быть, очень опоздала на вечеринку, но если у вас есть массив объектов, которые вы смотрите, решение просто проверять длину массива выбранных объектов работал для меня. HTML-код 


<div ng-repeat="vehicle in vehicles">
    <input type="checkbox" name="car" ng-model="car.ids[vehicle._id]" ng-required=" car.objects.length
Комментарии (0)

Мы можем достичь ваше требование без прохождения всех чек-боксов экземпляр. Вот пример кода

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

Здесь я закончу JavaScript-функции eval в "Е" и функции для доступа к нему.



      Value1: <input type="checkbox" ng-model="checkboxModel.value[0]" ng-change="e('($scope.checkboxModel.value[0])?$scope.c++:$scope.c--')"/>
  <br/>

      Value2: <input type="checkbox" ng-model="checkboxModel.value[1]" ng-change="e('($scope.checkboxModel.value[1])?$scope.c++:$scope.c--')"/>
  <br/>
  value = {{checkboxModel.value}}<br/>
  isAtLeastOneChecked = {{c>0}}
Комментарии (0)