0
저는 angularjs 응용 프로그램과 많은 문제에 직면 한 초보자로 작업하고 있습니다. 두 개의 각도 UI 격자가 있습니다. 텍스트 필드의 사용자 입력에 따라 UI 그리드에 값을 표시해야합니다. 이것을 달성하는 데 어려움을 겪고 있습니다. 어떤 제안이라도 도움이 될 것입니다. 내 코드 here의 데모를 찾으십시오.각도 UI 그리드 및 값을 사용자 입력을 기준으로 표시합니다.
사용자 유형 /가 으로 텍스트 필드에 텍스트 필드와 시카고에서 애틀랜타를 선택하고 SearchLocations에 버튼을 클릭, 그것은 이름 AtlantaChicago 아래에 표시되는 값으로 격자를 보여주고있다. 현명하게도 NewYorkChicago라는 이름 아래에 표시되는 새 값을 NewYork 및 chicago 유형으로 표시해야합니다. 텍스트 상자에 값을 입력하지 않으면 격자가 표시되지 않습니다. 어떤 제안이라도 도움이 될 것입니다.
HTML 코드 :
<body style="padding-left:15px" ng-controller="searchController">
<form class="form-inline">
<div class="row">
<div class="form-group" ng-controller="citiesCtrl">
<label>From</label>
<input type="text" ng-model="places1" 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="places2" placeholder="Type Destination City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
</div>
</div>
<input type="submit" value="SearchLocations" ng-submit="submit()">
<div ng-repeat="user in users">
<h3>{{user.name}}</h3>
<div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
</div>
</form>
</body>
JS 코드 :
당신은 부모 범위places 정의 할 필요가 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.submit = function() {
alert("in submit");
if ($scope.places1) {
alert("inside the condition");
/* $scope.list.push(this.places1);
$scope.places1 = '';
*/ }
};
$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
};
}]);