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

Question

请帮我查找以下代码的所有选定单选按钮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;
            }
        });
    };
});

Answer 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>