如何在 ng-repeat 中选择多个单选按钮？答案

【问题标题】：How can I select multiple radio buttons in ng-repeat?如何在 ng-repeat 中选择多个单选按钮？
【发布时间】：2017-08-29 10:05:52
【问题描述】：

code in plunkr

<tr ng-repeat="item in items.options">
    <td width="90%" ng-bind="item.value" align="center" class="align-items-center"></td>
    <td width="10%" align="center">
    <input type="radio" id="enabled{{item.name}}" name="enabled{{item.name}}" ng-model="radio.selection" ng-change="dataforAccessRight(function.fncFunctionCode,'Y')"
        ng-value="1" />
</td>

我想创建一个菜单，我可以在其中为使用 ng-repeat 重复的各种项目选择启用和禁用选项。

【问题讨论】：

plunkr 内没有工作代码
查看material.angularjs.org/latest/demo/radioButton

标签： javascript angularjs radio-button angularjs-ng-repeat

【解决方案1】：

老实说，这个问题对我来说似乎很模糊。您要启用或禁用什么？让我尝试展示如何使用 ng-repeat 在表格中设置单选按钮。

这是 HTML（请注意，我已经从问题中复制了单选按钮代码，因为我不知道您希望用它们完成什么）：

 <table border=3>
  <tr ng-repeat="product in products">
    <td>{{product.id}}<input type ="radio"
                                   id = "enabled{{item.name}}"
                                   name = "enabled{{item.name}}"
                                   ng-model="radio.selection"
                                   ng-change="dataforAccessRight(function.fncFunctionCode,'Y')"
                                   ng-value="1"

                            /></td>
    <td>{{product.name}}</td>
  </tr>
</table>

还有 .js 代码：

 var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = [{id:1,
                        name:"Milk"},
                        {id:2,
                        name:"Bread"},
                        {id:3,
                        name:"Cheese"}];
});

【讨论】：

【解决方案2】：

我认为他想问的是他想要一个通用开关来启用/禁用 ng-repeat 上的所有单选按钮。问题是单选按钮不应该一次全部选中，所以我将使用复选框。

在此处查看此工作示例：

angular
  .module('app', [])
  .controller('TestController', function($scope) {
     
     $scope.items = [
      {
        label: 'Item 1',
        selected: true
      },
      {
        label: 'Item 2',
        selected: false
      },
      {
        label: 'Item 3',
        selected: false
      }
     ];
     
     this.toggleItems = function(context) {
        for(var i = 0; i < $scope.items.length; i++) {
          var item = $scope.items[i];
          
          item.selected = (context === 'SELECT ALL');
        }
     }
     
  });

a {
  cursor: pointer;
  display: inline-block;
  text-decoration: underline;
}

form {
  margin-top: 20px;
}

form label {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Universal toggle</title>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-app="app">

<div ng-controller="TestController as ctrl">

  <a ng-click="ctrl.toggleItems('SELECT ALL')">
    Select all
  </a>
  
  <a ng-click="ctrl.toggleItems('DESELECT ALL')">
    Deselect all
  </a>

  <form>
     <label ng-repeat="item in items">
       <input type="checkbox" ng-model="item.selected"> {{item.label}}
     </label>
  </form>

</div>

</body>
</html>

这应该做（如果我理解正确的话）你想要达到的目标。

【讨论】：