AngularJS单选按钮ng-repeat值答案

【问题标题】：AngularJS radio buttons ng-repeat valueAngularJS单选按钮ng-repeat值
【发布时间】：2015-06-27 08:16:59
【问题描述】：

我正在使用 ng-repeat 创建单选按钮，并希望所选按钮的名称值显示在下方。

这是我的看法：

<span ng-repeat="weight in weights">
  <input type="radio" name="weight" value="{{weight.name}}" id="weight{{weight.name}}" ng-checked="weight.checked">
  <label for="weight{{weight.name}}">{{weight.name}}</label>
</span>
<p>Weight: {{weight.name}}</p>

这是我的控制器：

$scope.weights = [
  {
    name: 1,
    checked: true
  },
  {
    name: 2,
    checked: false
  },
  {
    name: 3,
    checked: false
  }
];

Here is my Plunker.

如何让权重出现在段落标签中？

【问题讨论】：

标签： javascript arrays angularjs radio-button

【解决方案1】：

您应该在ng-model 之一中保持收音机的价值并使用$parent。在控制器范围内定义它，而不是像这里一样在ng-repeat 中定义它

标记

<body ng-controller="MainCtrl" ng-init="radioValue=1">
  <span ng-repeat="weight in weights">
    <input type="radio" name="weight" ng-model="$parent.radioValue" ng-value="{{weight.name}}" id="weight{{weight.name}}" ng-checked="weight.checked">
    <label for="weight{{weight.name}}">{{weight.name}}</label>
  </span>
  <p>Weight: {{radioValue}}</p>
</body>

Working Plunkr

【讨论】：

@Ryan 很高兴为您提供帮助，谢谢 :-)

【解决方案2】：

答案在于理解 $scope 如何在 Angular 中工作。快速的解决方案是使用 $parent.selectedName，其中 $parent 指的是父范围。这是因为 ng-repeat 的每次迭代都会创建一个自身的范围。（见enter link description here

看到这个https://jsfiddle.net/pankaj01/Xsk5X/3074/ JS是

function MyCtrl($scope) {

$scope.weights = [
  {
    name: 1,
    checked: true
  },
  {
    name: 2,
    checked: false
  },
  {
    name: 3,
    checked: false
  }
];

}

【讨论】：