ng-Modell zu Gruppen von mehreren Möglichkeiten

Question

Im Fall von Gruppen von mehreren Entscheidungen gelten, kann ich die Benutzeroberfläche durch dieses einfache Beispiel bauen:

<div ng-controller="MyCtrl"> 
<!-- choose colour and size --> 
<fieldset ng-repeat="(fieldName, field) in fields"> 
<label ng-repeat="choice in field"> 
    <input ng-model="field" type="radio" /> 
    {{choice}} 
</label> 
</fieldset> 
choices: {{fields}} 

und seine javascript:

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

function MyCtrl($scope) { 
    $scope.fields = { /* in practice, the number of fields is dynamic */ 
    field1: ["red", "blue", "black"], 
    field2: ["big", "small", "medium"] 
    } 
} 

Die generierte Benutzeroberfläche ermöglicht Benutzern die Auswahl, aber das {{fields}} ng-Modell scheint nicht zu sein, da sich der Wert nicht ändert, wenn der Benutzer seine Auswahl trifft.

Ich dachte, dass ich vielleicht eine andere Variable für ng-Modell, z.

$scope.choices = {field1: "", field2: ""} 

Um mit $scope.fields zu gehen, um die Wahlen des Benutzers zu halten. Aber verschiedene Versuche, eine neue Variable zu verwenden, scheiterten. Ich bin mir sicher, dass der richtige Weg dazu in Frage gestellt und beantwortet wurde. Bitte bitte mit meinem Such-fu tragen.

Answer 1

Zuerst haben Ihre Optionsfelder keinen Wert, so dass Sie nichts binden können. Fügen Sie value="{{choice}}" hinzu.

Zweitens versuchen Sie, an field zu binden, was in diesem Fall ein Array von Werten wie ["red", "blue", "black"] ist, die keinen Sinn ergeben. Sie müssen sich an etwas anderes binden.

Sie sollten Ihre Datenstruktur zu etwas wie unten, die ein Array, das wir für die Radiobuttons durchlaufen können, und auch eine Eigenschaft, die wir mit ng-model binden.

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

 
myApp.controller("MyCtrl", MyCtrl); 
 

 
function MyCtrl($scope) { 
 

 
    $scope.fields = { /* in practice, the number of fields is dynamic */ 
 
    field1: { 
 
     choices: ["red", "blue", "black"], 
 
     selected: "red" 
 
    }, 
 
    field2: { 
 
     choices: ["big", "small", "medium"], 
 
     selected: "big" 
 
    } 
 
    } 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <!-- choose colour and size --> 
 
    <fieldset ng-repeat="(fieldName, field) in fields"> 
 
    <label ng-repeat="choice in field.choices"> 
 
     <input ng-model="field.selected" type="radio" value="{{choice}}" />{{choice}} 
 
    </label> 
 
    </fieldset> 
 
    <br/>Fields: {{fields}} 
 
</div>