将 ng-model 应用于多选组

Question

在多选组的情况下，我可以通过这个简单的例子构建UI：

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

及其 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"]
  }
}

生成的 UI 允许用户做出选择，但 {{fields}} ng-model 似乎没有，因为当用户做出选择时它的值不会改变。

我想也许我需要一个不同的 ng-model 变量，例如

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

与 $scope.fields 一起保留用户的选择。但是使用新变量的各种尝试都失败了。我确信这样做的正确方法已经在这里受到质疑和回答。请多多包涵我的搜狐

Answer 1

首先，您的单选按钮没有值，因此您将无法绑定到任何内容。添加 value="{{choice}}".

其次，您正在尝试绑定到 field，在本例中是一个值数组，如 ["red", "blue", "black"]，这没有意义。您需要绑定到其他东西。

您应该将您的数据结构更改为类似下面的内容，其中有一个我们可以为单选按钮迭代的数组，还有一个属性我们将使用 ng-model.[=16 绑定到它=]

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>

将 ng-model 应用于多选组

apply ng-model to groups of multiple choices

angularjs

angular-ngmodel