Ui网格单选按钮选择每行

早上好！我正在使用Angular ui-Grid。最后一个字段应该包含3个单选按钮，用户可以选择每行。全部的默认值应该是Value = 0。问题是我只能在整个网格中选择1个单选按钮，而不是每行一个。我相信应该有办法做到这一点，但我一直无法弄清楚或找到任何这样的在线例子。这是我网格的PIC，它可以帮助给的什么，我试图完成一个更好的主意：Ui网格单选按钮选择每行

最终，该数据将来自于我们的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;

任何援助非常感谢！

来源

2015-10-28 Rani Radcliff

我认为你必须使用** BTN-组** bootstrap3的 –

感谢您的帮助，但改变的div类btn-group在UI网格中没有区别，因为它将网格中的所有按钮都视为1组，而不是每行1组。 –

我能够从每个按钮删除名称=“释放”，以获得期望的结果。新的单元格模板如下所示：

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

我希望这可以帮助别人！

来源

2015-10-28 17:06:08

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

这里是包机链接 http://plnkr.co/edit/VXpWT8MYwp9bNfF11vHM?p=preview

cellTemplate：

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

来源

2015-10-29 09:22:11 SaiGiridhar

Ui网格单选按钮选择每行

回答

相关问题