Question

我正在尝试用单选按钮替换选择 - 但是当我换到单选按钮时，我放弃了我的初始选择和选择中断。

$scope.selection = Address.get(); // { id: 1, name: "Home" };
$scope.addresses = Address.query(); // [{ id: 1, name: "Home" }, { id: 2, name: "Work" }];

From（在此示例中，select已选择“Home”）：

<select class="form-control" ng-model="selection" 
  ng-options="address.street for address in addresses track by address.id">
</select>

To（在此示例中未选择“Home”的单选按钮）：

<div ng-repeat="address in addresses track by address.id">
  <label>
    <input type="radio" ng-value="address" ng-model="selection" />
    <span>{{address.name}}</span>
  </label>
</div>

小提琴：http://tools.seobook.com/robots-txt/

修改：

我需要selection在更改后反映id和name：

<span>Selection:</span> <span>{{selection.name}} - {{selection.id}}</span>

Answer 1

尝试使用此功能（用于无线电输入）。事实证明，ng-repeat正在抛弃它（你需要使用$ parent.selection）：

<input type="radio" ng-value="address" ng-model="$parent.selection"/>

我认为它的工作方式与this update to your fiddle

一样

初始值

哎呀。 我觉得自己像个白痴，但我终于发现，角度无法告诉你的初始“选择”与地址[0]相同。

所以 - 我不得不改变你设置$ scope.selection的方式：

app.controller("SampleController", ['$scope', function($scope) {
  $scope.addresses = [
    { id: 1, name: "Home" }, 
    { id: 2, name: "Work" },
   ];
  $scope.selection = $scope.addresses[0];
}]);

现在我们都准备好了。 Sheesh ......那是“隐藏在普通视线中”的错误之一......

Answer 2

值和模型应该是根据input[radio]文档的字符串：

  <input type="radio" ng-value="address.name" ng-model="selection.name" />

JSFiddle演示：** https://jsfiddle.net/xczdcqx0/2/

Answer 3

<强>来源：

using

<强>控制器：

<div ng-repeat="address in addresses track by address.id">
  <label>
    <input type="radio" ng-checked="checked(address)" ng-click="click(address)" />
    <span>{{address.name}}</span>
  </label>
</div>

注意：部分从@bri。

提供的解决方案中提取

角度无线电按钮而不是选择

3 个答案: