[英]unable to show radio buttons in each row of grid
我正在开发angularjs应用程序。 我正在基于用户输入的值显示角度UI网格。我想在UI网格的每一行中显示单选按钮,并且默认情况下应选择第一行单选按钮。用户应该可以选择任何一行单选按钮。请在此处找到代码演示 。
要显示UI网格,请在“发件人”文本字段中输入Atlanta,在“到”文本字段中输入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
};
}]);
只需在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>
注意:使用双击进行编辑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.