2017-08-28 115 views
0

code in plunkr如何在ng-repeat中选择多个单选按钮?

<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-重复重复各种物品禁用选项。

+0

PLUNK内部没有工作代码 –

+0

查看https://material.angularjs.org/latest/demo/radioButton –

回答

0

老实说,这个问题对我来说似乎很模糊。你想要启用或禁用的是什么? 让我试着展示如何使用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"}]; 
}); 
0

我认为他想问的是他想要一个通用开关,用于启用/禁用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>

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