Ui-每行的网格单选按钮选择

Question

大家早上好！我正在使用 Angular ui-Grid。最后一个字段应该包含 3 个单选按钮，用户可以每行 select。所有的默认值都应该是 Value=0。问题是我只能在整个网格中 select 1 个单选按钮，而不是每行一个。我相信应该有办法做到这一点，但我一直无法弄清楚或在网上找到任何此类示例。这是我的网格的图片，它可能有助于更好地了解我要完成的工作：

最终，数据将来自对我们 Web 的调用 Api，但目前我正在用虚假数据填充网格。这是我的控制器代码：

 $scope.gridOptions = {};

    $scope.gridOptions = {
        columnDefs: [
      {
          name: 'CompanyID', width: '200'
      },
      {
          name: 'CompanyName', width: '200',
      },
      { name: 'City', width: '200' },
      { name: 'State', width: '150' },
      { name: 'Subscription', width: '150' },
      {
          name: 'ReleaseAction', width: '350',
          cellTemplate: '<div ng-init="releaseAction=0"><input name="Release" ng-model="releaseAction" type="radio" value="0" style="width:20px">&nbsp;None&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="Release" type="radio" ng-model="releaseAction"  value="1" style="width:20px">&nbsp;Accept&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="Release" type="radio" ng-model="releaseAction"  value="2" style="width:20px">&nbsp;Decline</div>'
      },

        ]
    };

    var gridData = [
        {
            CompanyID: 1,
            CompanyName: 'Tanner & Associates',
            City: 'Houston',
            State: 'TX',
            Subscription: 'Expired',
            //ReleaseAction: 0
        },
        {
            CompanyID: 2,
            CompanyName: 'Total Energy Services',
            City: 'Conroe',
            State: 'TX',
            Subscription: 'Active'
        },
        {
            CompanyID: 3,
            CompanyName: 'SPSD Inc',
            City: 'Arlington',
            State: 'TX',
            Subscription: 'Active'

        }
    ];

    $scope.gridOptions.data = gridData;

非常感谢任何帮助！

Answer 1

我能够通过从每个按钮中删除 name="Release" 来获得所需的结果。新的单元格模板如下所示：

  cellTemplate: '<div class="btn-group" ng-init="releaseAction=0"><input ng-model="releaseAction" type="radio" value="0" style="width:20px">&nbsp;None&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input ng-model="releaseAction" type="radio" value="1" style="width:20px">&nbsp;Accept&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input ng-model="releaseAction" type="radio" value="2" style="width:20px">&nbsp;Decline</div>'

我希望这对其他人有帮助！

Answer 2

发生这种情况是因为所有单选按钮的名称都相同。因此，一种解决方法是将每一行的索引附加到名称。

这是拔毛器link http://plnkr.co/edit/VXpWT8MYwp9bNfF11vHM?p=preview

单元格模板：

<div ng-init="releaseAction=0"><input name="Release{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}" ng-model="releaseAction" type="radio" ng-value="0" style="width:20px">&nbsp;None&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="Release{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}" type="radio" ng-model="releaseAction"  ng-value="1" style="width:20px">&nbsp;Accept&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="Release{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}" type="radio" ng-model="releaseAction"  ng-value="2" style="width:20px">&nbsp;Decline</div>

Ui-每行的网格单选按钮选择

Ui-Grid Radio Buttons Selection Per Row

javascript

angularjs

angular-ui-grid