javascript - ejemplos - Uso de casillas de verificación y requerido con AngularJS

angularjs tutorial

Question

Intenté usar el atributo required html5 para mi grupo de casillas de verificación, pero no encuentro una buena manera de implementarlo con ng-form.

Cuando se marca una casilla de verificación, quiero que el valor de ese elemento de entrada se envíe a una matriz de valores.

El validador requerido angular parece observar el modelo ng asociado con el elemento de entrada, pero ¿cómo puedo vincular varias casillas de verificación al mismo modelo y actualizar su valor con el valor del campo de entrada?

En este momento, la implementación es como este violín .

<div ng-controller="myCtrl">
  <ng-form name="myForm">
    <span ng-repeat="choice in choices">
      <label class="checkbox" for="{{choice.id}}">
        <input type="checkbox" required="required" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" />
        {{choice.label}}
      </label>
    </span>
    <input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
  </ng-form>
</div>​

La función updateQuestionValue maneja la adición o eliminación de la matriz de valores, pero cada casilla de verificación tiene su propio modelo y es por eso que cada casilla de verificación debe verificarse para que el formulario sea válido.

Tengo que trabajar en un grupo de botones de radio, pero todos funcionan en el mismo modelo ya que solo se puede seleccionar uno.

Answer 1

¿Por qué no hacer que su casilla de verificación modele la matriz

<input type="checkbox" ng-model="value[$index]" value="{{choice.id}}/>

Fiddle: http://jsfiddle.net/thbkA/1/

Answer 2

Acabo de agregar una entrada oculta con ng-model que es lo mismo que su ng-modelo para el botón de opción:

 <div class="radio" ng-repeat="option in item.AnswerChoices | orderBy: DisplayOrder">
        <input type="radio" ng-model="item.Answer" name="mulchoice" value="{{option.DisplayName}}" />
        <span>{{option.DisplayName}}</span>
    <input type="hidden" ng-model="item.Answer" name="hiddenradiobuttoninput" required/>
 </div>

Answer 3

Si desea deshabilitar el botón Enviar si no se selecciona ninguna opción, la forma más fácil es verificar la longitud de la matriz en el atributo ng-disabled, sin configurar el atributo requerido.

<input type="submit" value="Send" ng-click="submitSurvey(survey)" 
 ng-disabled="value.length==0" />

Vea aquí para el violín actualizado

Otra forma de hacerlo sería verificar la longitud de la matriz en el atributo ng-required de las casillas de verificación

<input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)"
  ng-model="choice.checked" name="group-one" id="{{choice.id}}" 
  ng-required="value.length==0" />

Segundo violín

Answer 4

Unas pocas cosas:

• Me gustaría ir con un enfoque que acaba de actualizar toda la matriz en este caso, ya que simplificaría un poco el código. (Puede que no desee hacer esto si está haciendo algo con estado con los contenidos de la matriz $ scope.value, pero no parece que lo sea).
• puedes usar <form> lugar de <ng-form> .
• mueva la función de enviar fuera del botón ng-click y dentro del formulario ng-submit . Esto hace que la gestión de validación sea un poco más fácil con la validación integrada de angular (si te preocupa eso)
• Si su <label> ajusta su <input> , no necesita el atributo for="" .

Aquí hay un violín actualizado para ti

Y aquí está el código:

<div ng-controller="myCtrl">
    <form name="myForm" ng-submit="submitSurvey(survey)">
        <span ng-repeat="choice in choices">
            <label class="checkbox">
            <input type="checkbox" required="required" value="{{choice.id}}" ng-change="updateQuestionValues()" ng-model="choice.checked" name="group-one" />
                {{choice.label}}
            </label>
        </span>
        <input type="submit" value="Send" ng-disabled="myForm.$invalid" />
    </form>
    {{value}}
</div>​

JS

function myCtrl($scope) {

    $scope.choices = [{
        "id": 1,
        "value": "1",
        "label": "Good"},
    {
        "id": 2,
        "value": "2",
        "label": "Ok"},
    {
        "id": 3,
        "value": "3",
        "label": "Bad"}];

    $scope.value = [];

    $scope.updateQuestionValues = function() {
        $scope.value = _.filter($scope.choices, function(c) {
            return c.checked;
        });
    };
}​

Answer 5

<ul  class="list-group">
  <li ng-repeat=''animal in animals'' class="list-group-item">
    <label>
      <input type="checkbox"
        ng-model="xyx"
        ng-click="toggleAnimal(animal)"
        ng-checked="selectedAnimals.indexOf(animal) > -1"
        ng-required="selectedAnimals.length == 0" /> 
        {{animal}}</label>
  </li>                  
</ul>

$scope.toggleAnimal = function(animal){
    var index = $scope.selectedAnimals.indexOf(animal);
    if(index == -1) {
      $scope.selectedAnimals.push(animal);
    }
    else{
      $scope.selectedAnimals.splice(index, 1);
    }
}

Vea el detalle completo y la demostración y otros ejemplos relacionados