[英]javascript to hide and show the grids based on the radio button selected and click on search button
我正在研究 angularjs 应用程序。 在尝试获得下面提到的场景时,作为一个面临问题的新手。任何建议都会有所帮助。
我想根据顶部选择的单选按钮显示一两个角度 UI 网格。 当用户选择显示一个网格单选按钮,然后键入从亚特兰大到文本字段文本字段和芝加哥点击SearchLocations按钮应显示第一angularjs UI电网。 类似地,当用户选择“显示两个网格”单选按钮并在“从”文本字段中键入“亚特兰大”和“到”文本字段中的“芝加哥”并单击“搜索位置”按钮时,应显示两个网格。 请在此处找到演示。
HTML代码:
<div>
<label>
Show one Grid <input type="radio" name="Passport" ng-click="ShowPassport('Y')" /></label>
<label>Show two Grids <input type="radio" name="Passport" ng-click="ShowPassport('N')" />
</label>
</div>
<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 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-repeat="user in users | filter: {name: searchValue} : true ">
<h3>Second Grid</h3>
<div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
</div>
js代码:
angular.module('myApp', ['ngAnimate', 'ui.bootstrap','ngTouch', 'ui.grid', '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.submit = function() {
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"},
{"Travel Date": "10/11/2014", commute:"flight"}]
},
{'name' : 'NewYorkChicago',
'show' : true,
'details': [
{"Travel Date": "3/15/2016", commute:"flight"},
{"Travel Date": "10/12/2016", commute:"flight"},
]
}
];
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{ name: 'Travel Date', width: '5%'},
{ name: 'Departurecommute', enableFiltering: false, width: '12%' }
],
rowHeight: 20,
enableHorizontalScrollbar:2
};
}]);
您需要更改一些内容才能使其按预期工作。
如果要根据单选按钮选择显示网格:
1. 你应该为你的单选按钮分配ng-model
和value
。 Angular 中的单选按钮
<label>
Show one Grid
<input type="radio" name="Passport" ng-model="Passport" value=1 ng-click="ShowPassport('Y')" />
</label>
<label>Show two Grids
<input type="radio" name="Passport" ng-model="Passport" value=2 ng-click="ShowPassport('N')" />
</label>
2.在button
单击时将Passport
值分配给另一个变量。 使用 Angular 显示隐藏
$scope.submit = function() {
$scope.showGrid = $scope.Passport; //Here
if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
$scope.searchValue = $scope.places[0] + $scope.places[1];
}
};
3.将您的网格包裹在一个 div 中并分配 ng-show 属性
<div ng-show="showGrid==='1'||showGrid==='2'"> //first grid
<div ng-show="showGrid==='2'"> //second grid
4.现在应该可以了。 请参阅工作 plnkr
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.