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

Question

I am working on angularjs application. I am displaying the angular UI grid based on the user entered values.I want to show radio button in every row of the UI grid and first row radio button should be selected by default.User should able to select any one row radio button.Please find the code demo here .

To display UI grid, enter Atlanta in From text field and Chicago in To text field and click on SearchLocations, i could not able to see radio buttons in the rows instead it is showing the value assigned as true/false. Any suggestions would be very helpful.

html code:

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

  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

just add directive "ui-grid-edit" in your html.

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

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

Note : use double click to edit.