如何使用Object在angularjs中设置单选按钮答案

【问题标题】：How to set radio button in angularjs with Object如何使用Object在angularjs中设置单选按钮
【发布时间】：2015-04-26 08:14:41
【问题描述】：

我使用 ng-value 和 ng-model 的对象数组在 angularjs 中创建了单选按钮。

<div ng-controller="DemoController">
      <div ng-repeat="detail in details">
          <input type="radio" ng-model="$parent.selectedVal" ng-value="detail" name="test">
      </div>       
      {{selectedVal}}
  </div>

` 在选择单选按钮模型时填充相应的对象值。但我不确定如何使用带有对象的控制器来初始化它。

 var app = angular.module('myApp', []);
app.controller("DemoController",DemoController);
function DemoController($scope) {
    $scope.selectedVal={name:"Def",age:4} ;
    $scope.details=[{name:'Abc',age:2},{name:'Xyz',age:3},{name:'Def',age:4}];
  }

【问题讨论】：

您应该使用$scope.selectedVal=$scope.details[3]; 选择第三个值。
你确定 JsFiddle 链接正确吗？
@Chandermani 谢谢，但我有一个用例，当页面加载时，我正在进行两个服务调用，一个用于渲染单选按钮，另一个用于使用已选择的值填充单选按钮（保存在数据库中） .如果我实施您提供的解决方案，那么我必须迭代完整的数组，例如$scope.details 在我的示例中查找已选择值的索引并使用该值初始化模型。还有其他明确的方法吗？
@Ofiris 是的，我注意到我错误地放置了另一个 JSFiddle 链接。

标签： angularjs

【解决方案1】：

您应该从 details 数组中引用选定的值，而不是创建一个新实例：

$scope.details = [{ name:'Abc', age:2 }, { name:'Xyz', age:3 }, { name:'Def', age:4 }];    
$scope.selectedVal = $scope.details[2];

这将选择 3 个单选按钮中的最后一个。此外，如果details 和selectedVal 都定义在同一个范围内，您也应该更新您的单选按钮，很不清楚为什么您从$parentScope 引用selectedVal：

<input type="radio" ng-model="selectedVal" ng-value="detail" name="test" />

这是更新后的小提琴：https://jsfiddle.net/sb3krc8c/2/

【讨论】：

谢谢@Darin，但我有一个用例，当页面加载时，我正在进行两个服务调用，一个是渲染单选按钮，另一个是使用已经选择的值填充单选按钮（保存在数据库中） .如果我实施您提供的解决方案，那么我必须迭代完整的数组，例如$scope.details 在我的示例中查找已选择值的索引并使用该值初始化模型。还有其他明确的方法吗？