Checkboxen verwenden und mit AngularJS benötigt

Ich habe versucht, verwenden Sie die html5 - required Attribut für meine Gruppe von Checkboxen, aber ich finde nicht ein schöner Weg, es zu implementieren, mit ng-form.

Wenn eine checkbox aktiviert ist möchte ich den Wert des input-Elements geschoben werden, um ein array von Werten.

Den Winkel erforderlich validator zu Wachen scheint das ng-Modell im Zusammenhang mit dem input-element, aber wie kann ich mehrere Checkboxen, um das gleiche Modell, und aktualisieren Sie den Wert mit dem Wert des input-Feldes?

Jetzt die Umsetzung ist wie diese Geige.

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

Den updateQuestionValue-Funktion verarbeitet das hinzufügen oder entfernen von array-Werten, aber jede checkbox hat einen eigenen Modell-und das ist der Grund, warum jede checkbox muss überprüft werden, damit das Formular gültig ist.

Habe ich es auf der Arbeit auf eine Gruppe von radio-buttons, aber Sie funktionieren alle nach dem gleichen Modell, wie das nur einer kann ausgewählt werden.

InformationsquelleAutor der Frage Tryggve | 2012-11-26

angularjs javascript

35

Wenn Sie möchten, dass der submit-button deaktiviert, wenn keine Wahl ist gewählt, der einfachste Weg ist, um die Länge des Arrays in der ng-disabled-Attribut, ohne das erforderliche Attribut
```
<input type="submit" value="Send" ng-click="submitSurvey(survey)" 
 ng-disabled="value.length==0" />
```
Hier finden Sie aktualisierte fiddle

Einen anderen Weg, dies zu tun wäre zu prüfen, die array-Länge im ng-required-attribute der Checkboxen
```
<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" />
```
Die zweite Geige

InformationsquelleAutor der Antwort tocallaghan

Ein paar Dinge:

Würde ich mit einem Ansatz, der gerade aktualisiert wird das gesamte array in diesem Fall, da es vereinfachen würde, den code ein wenig. (Sie könnten dies nicht tun wollen, wenn Sie etwas stateful mit dem $scope.Wert array-Inhalt, aber es sieht nicht wie Sie sind).
können Sie einfach <form> eher als <ng-form>.
bewegen Sie den submit-Funktion ausschalten die Schaltfläche ng-click und in der form ng-submit. Das macht die Validierung management ein wenig leichter mit angular built-in Validierung (falls Sie das interessieren)
Wenn Ihr <label> umhüllt Ihre <input> Sie nicht brauchen, die for="" Attribut.

Hier ist eine aktualisierte Geige für Sie

Und hier ist der code:

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

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

InformationsquelleAutor der Antwort Ben Lesh

Habe ich nur noch einen hidden input mit ng-Modell, das ist das gleiche wie das ng-Modell für die radio-Taste:

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

InformationsquelleAutor der Antwort Shaz

2

Warum machen Sie nicht Ihren checkbox Modelle der array
```
<input type="checkbox" ng-model="value[$index]" value="{{choice.id}}/>
```
Fiddle: http://jsfiddle.net/thbkA/1/

InformationsquelleAutor der Antwort johans

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

Siehe die vollständigen Details und demo und andere Verwandte Beispiele

InformationsquelleAutor der Antwort Ali Adravi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.