控制器

Question

在input[radio]上阅读Angular的文档后，我看到您可以使用ng-value将每个单选按钮绑定到示波器/控制器上的值。但是，我无法使用我的视图来表示模型的初始值。

控制器

  $scope.color = {
    name: 'blue'
  };
  $scope.specialValue = {
    "id": "12345",
    "value": "green"
  };

模板

<input type="radio" ng-model="color.name" value="red">Red
<input type="radio" ng-model="color.name" ng-value="specialValue">Green
<input type="radio" ng-model="color.name" value="blue">

如果初始值是简单值（Plunkr）。

，则此方法有效

但是，如果我尝试将初始值specialValue作为我范围内的对象，那么事情似乎并不像我期望的那样（Plunkr）。我希望初始值为绿色，但是，初始值未被选中，当您选择绿色时，模型不再更新。

Answer 1

因为它期待着color.name。分配$ scope.specialValue时，需要像$scope.color = {name: $scope.specialValue}

那样进行

除非您希望显示值green，否则您的ng值应为ng-value="specialValue.value"

Answer 2

将<input type="radio" ng-model="color.name" ng-value="specialValue">Green更改为<input type="radio" ng-model="color.name" ng-value="specialValue.value">Green。

您正在指定一个对象而不是所需的颜色。

Answer 3

ng-model访问color.name属性。在您的第二个plnkr中执行$ scope.color = $ scope.specialValue时，您不再具有name属性，只有id和value。

您的初始color对象如下所示：

$scope.color = {
  name: "red"
}

完成$scope.color = $scope.specialValue之后你的对象就像这样

$scope.color = {
  id: "12345",
  value: "green"
}

如果在此处添加第二行，则可以看到已设置$ scope.color变量。但是将id和value作为属性 - 不再使用name属性。

<tt>color = {{color.name | json}}</tt><br/>
<tt>color = {{color | json}}</tt><br/>

我还添加了一个angular.copy函数来创建对象的副本，而不是用另一个引用它们。

请参阅：http://plnkr.co/edit/dixCCsTNVrYQ8dmFKVjb?p=preview

ng-model：无线电输入未响应模型更改而更新

控制器

模板

3 个答案: