AngularJS单选按钮ng-repeat值

Question

我正在使用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
  }
];

这是我的柱塞。

如何获得粗细显示在段落标签中？

Answer 1

您应该在ng-model之一中保持radio的值并使用$ 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>

工作朋克

Answer 2

答案在于了解$ scope如何在角度中工作。 快速解决方案是使用$ parent.selectedName，其中$ parent指向父范围。 这是因为ng-repeat的每次迭代都会创建其自身的作用域。 （请参阅此处输入链接说明

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

function MyCtrl($scope) {

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

}

AngularJS单选按钮ng-repeat值

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-04-20 14:42:27

解决方案2
0 2018-08-06 17:45:08

AngularJS单选按钮ng-repeat值

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-04-20 14:42:27

解决方案2 0 2018-08-06 17:45:08

解决方案1
2 已采纳 2015-04-20 14:42:27

解决方案2
0 2018-08-06 17:45:08