0
私は、技術html、angularjs、java、SpringでWebアプリケーションを開発しています。 私の要件は、自分のアプリケーションの検索ページを作成することです。私は詳細を入力してinformation.Pleaseがにテキストフィールドにテキストフィールド、シカゴからにアトランタを入力して、情報を表示するには、SearchLocationsボタンをクリックして検索する必要がデモにhereangularjsアプリケーション - javascriptファイル内に書かれた角度コントローラにビジネスロジック/バックエンドコードを含めることができます
を見つけてください。
私が持っているいくつかの質問：
1）私は私のangularjsにビジネスロジックを記述することができ、以下に示すサンプルコードとしてジャバスクリプトファイルに書かれているコントローラ：
angular.module('myApp').controller('searchController', ['$scope', function($scope) {
$scope.places = ['', ''];
$scope.searchValue = '';
$scope.submit = function() {
$scope.showGrid = $scope.Passport;
if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
$scope.searchValue = $scope.places[0] + $scope.places[1];
}
};
2）私はでき私のコントローラにバックエンドロジックを書き込む。はいの場合は、リンクを提案してください。 私が書いたjavascriptコードは、バックエンドコード/ビジネスロジックとして記述することができます。このような質問には申し訳ありませんが、私はこれが私の質問を明確にするための素晴らしいプラットフォームだと思っていました..
誰かがこの種の検索機能のバックエンドコードを書いてくれと頼まれた場合、任意の提案は非常に有用だろう。私が書いたコードは上のデモプランナーに示されているとおりです。ありがとうございます。
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() {
$scope.showGrid = $scope.Passport;
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
};
}]);
HTMLコード：
<div>
<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>
</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-show="showGrid==='1'||showGrid==='2'">
<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>
<div ng-show="showGrid==='2'">
<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>
</div>