如何在 ng-repeat 表中找到单选按钮值？答案

【问题标题】：How to find a radio button value inside ng-repeat table?如何在 ng-repeat 表中找到单选按钮值？
【发布时间】：2017-01-12 19:53:22
【问题描述】：

请帮我找到以下代码的所有选定单选按钮 ID。

下面是我的 HTML 的样子

<div ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <div>
            <table cellpadding="2" cellspacing="2" border="1" ng-repeat="dep in DepList track by $index">
                <tr>
                    <th> Name </th>
                </tr>
                <tr ng-repeat="item in ContactsList | findobj: dep.groupid">
                    <td>{{item.name}}</td>
                    <td><input type="radio" name="radius+{{$parent.$index}}" data-ng-value="{{item.id}}" ng-model="UniqueId" selected="true" /></td>
                </tr>
            </table>
        </div>
        <div>
            <button ng-click="Select()">Select</button>
        </div>
    </div>
</div>

这是我的控制器

var myapp1 = angular.module('MyApp', []);
myapp1.controller('MyCtrl', function ($scope) {
    $scope.DepList = [
        { dep: "computer", groupid: "1" }, 
        { dep: "english", groupid: "2" }
    ];
    $scope.ContactsList = [
    {
        name: "Sijith",
        id: "1",
        groupid: "1"
    }, 
    {
        name: "Deepak",
        id: "1",
        groupid: "2"
    },
    {
        name: "Libi das",
        id: "1",
        groupid: "2"
    }, 
    {
        name: "Noufal",
        id: "1",
        groupid: "1"
    }, 
    {
        name: "Jijo",
        id: "1",
        groupid: "2"
    }]; 
    $scope.Select = function () { 
            alert($scope.UniqueId);
    };
});   
myapp1.filter('findobj', function () {
    return function (ContactsList, id) {
        return ContactsList.filter(function (l) {
            if (l.groupid == id) {
                return true;
            }
        });
    };
});

【问题讨论】：

天哪。你能重新格式化你的代码吗？很乱。

标签： javascript jquery angularjs radio-button

【解决方案1】：

$scope.ContactsList 与单选按钮绑定的问题很少，您将每个元素的 id 绑定为单选按钮的值，如果不同的单选按钮不应该相同组内有不同的值。

我对其进行了一些更改，以便为每个单选按钮赋予不同的值。我还创建了一个 selectedContact 列表，在其中我将使用所属的组 ID 填充选定的单选按钮值。

var myapp1 = angular.module('MyApp', []);
myapp1.controller('MyCtrl', function($scope) {
  $scope.DepList = [{
    dep: "computer",
    groupid: "1"
  }, {
    dep: "english",
    groupid: "2"
  }];
  $scope.ContactsList = [{
    name: "Sijith",
    id: "1",
    groupid: "1"
  }, {
    name: "Deepak",
    id: "1",
    groupid: "2"
  }, {
    name: "Libi das",
    id: "2",
    groupid: "2"
  }, {
    name: "Noufal",
    id: "2",
    groupid: "1"
  }, {
    name: "Jijo",
    id: "3",
    groupid: "2"
  }];


  $scope.selectedContact = [];

  $scope.Select = function() {
    alert("group id 1 selected contact id:"+ $scope.selectedContact.groupid1);
    alert("group id 1 selected contact id:"+ $scope.selectedContact.groupid2);
  };
});

myapp1.filter('findobj', function() {
  return function(ContactsList, id) {
    return ContactsList.filter(function(l) {
      if (l.groupid == id) {
        return true;
      }
    });
  };
});

 <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
 

   <div ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <div>
            <table cellpadding="2" cellspacing="2" border="1" ng-repeat="dep in DepList track by $index">
                <tr>
                    <th> Name </th>
                </tr>
                <tr ng-repeat="item in ContactsList | findobj: dep.groupid">
                    <td>{{item.name}}</td>
                    <td><input type="radio" name="radius+{{$parent.$index}}" data-ng-value="{{item.id}}" ng-model="selectedContact['groupid'+dep.groupid]" selected="true" /></td>
                </tr>
            </table>
        </div>
        <div>
            <button ng-click="Select()">Select</button>         
        </div>
    </div>
</div>

【讨论】：