无法在每一行网格中显示单选按钮

Question

我正在开发 angularjs 应用程序。我正在根据用户输入的值显示角度 UI 网格。我想在 UI 网格的每一行中显示单选按钮，并且默认情况下应该选择第一行单选按钮。用户应该能够选择任何一行单选按钮。请找到代码demo here。

要显示 UI 网格，请在 From 文本字段中输入 Atlanta，在 To 文本字段中输入 Chicago，然后单击 SearchLocations，我无法在行中看到单选按钮，而是显示分配为 true/false 的值。任何建议都会非常有帮助。

html代码：

   <div class="row">
        <div class="form-group" ng-controller="citiesCtrl">
            <label>From</label>
            <input type="text" ng-model="places[0]" placeholder="Type Departure City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
        </div>
        <div class="form-group" ng-controller="citiesCtrl">
            <label>To</label>
            <input type="text" ng-model="places[1]" placeholder="Type Destination City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
        </div>
    </div>

    <input type="button" value="SearchLocations"  ng-click="submit()">

    <div ng-repeat="user in filteredUsers = (users | filter: {name: searchValue} : true)">
        <h3>First Grid</h3>
        <div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
    </div>

     <div ng-if="!filteredUsers.length && searched">
       No data available
     </div>

js代码：

  angular.module('myApp', ['ngAnimate', 'ui.bootstrap','ngTouch', 'ui.grid', 'ui.grid.edit','ui.grid.selection', 'ui.grid.edit','ui.grid.cellNav']);
         angular.module('myApp').controller('citiesCtrl',function($scope){
            // $scope. places = undefined;
            $scope.items = ["Atlanta", "Chicago", "NewYork"];
            $scope.selectAction = function() {
                console.log($scope.places1);

            };
       });

   /*Controller for searchLocations button*/
        angular.module('myApp').controller('searchController', ['$scope', function($scope) {
            $scope.places = ['', ''];
            $scope.searchValue = '';
            $scope.searched = false;

            $scope.submit = function() {
                $scope.searched = true;
                if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
                  $scope.searchValue = $scope.places[0] + $scope.places[1];
                }
            };

            $scope.users = [
                {'name' : 'AtlantaChicago',
                    'show' : true,
                    'details' : [
                        {"Travel Date": "10/10/2014",  commute:"Bus", "zip":"1222","isActive" : true},
                        {"Travel Date": "10/11/2014",  commute:"flight","zip":"11562","isActive" : false}]
                },
                {'name' : 'NewYorkChicago',
                    'show' : true,
                    'details': [
                        {"Travel Date": "3/15/2016",  commute:"flight","zip":"666","isActive" : true},
                        {"Travel Date": "10/12/2016",  commute:"flight","zip":"4532","isActive" : false},
                    ]
                }
            ];
            $scope.gridOptions = {
                enableFiltering: true,
                columnDefs: [
                    { name: 'Travel Date', width: '5%'},
                    { name: 'Departurecommute', enableFiltering: false, width: '12%' },
                    { name:'zip', field: 'getZip()', enableCellEdit:false},
                     { name:'isActive', width:300, field: 'radio', cellTemplate: '<div ng-init="releaseAction=0"><input name="Release{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}" type="radio" ng-model="releaseAction"  ng-value="1" style="width:20px"></div>'}

                ],
                rowHeight: 20,
                enableHorizontalScrollbar:2

            };
        }]);

Answer 1

只需在您的 html 中添加指令“ui-grid-edit”。

点赞http://plnkr.co/edit/QHzXIHRqqcNu01C2aPKn?p=preview

 <div ui-grid="{ data: user.details }" ui-grid-edit ng-show="user.show" class="myGrid"></div>

注意：使用双击编辑。