我有一個問題。我做了一個角度的web應用程序,它涉及一個Ajax調用json格式的日期,以在表中顯示它們。它有一個搜索輸入,兩個按鈕(按年齡或姓名排序)。它也有一個配置文件(側邊欄元素),Angular JS根據搜索結果和點擊事件更新DOM元素
我已經管理如何在點擊表格行上更新側邊欄(名稱,年齡,圖片,短語,fav動物),但我需要更新側邊欄信息,當我按排序按鈕(按名稱或年齡排序,當我進行搜索輸入時),我必須根據點擊的排序按鈕或搜索輸入以某種方式使用此json數據填充側欄。提前謝謝了!
這裏是HTML的一部分
<div class="app container-fluid" ng-controller="mainController">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search right person" ng-model="searchAnimal" ng-model="updateAnimal">
</div>
</div>
</form>
<div class="row">
<div class="col-sm-12">
<div class="toolbar">
<button ng-click="sortType = 'name'; sortReverse = !sortReverse; clickAnimal()" class="btn btn-default"><i class="icon fa fa-sort-alpha-asc"></i><span> Sort by name</span>
<span ng-show="sortType == 'name' && !sortReverse"></span>
</button>
<button ng-click="sortType = 'age'; sortReverse = !sortReverse; clickAnimal()" class="btn btn-default"><i class="icon fa fa-sort-numeric-desc"></i><span> Sort by age</span>
<span ng-show="sortType == 'age' && !sortReverse"></span>
</button>
</div>
</div>
</div>
<div class="row" ng-cloak>
<div class="col-sm-4 col-md-3 col-lg-2">
<div class="thumbnail"><img ng-src="{{ animImage }}.svg"/>
<div class="thumbnail-caption"><h3>{{ animName }}</h3><table class="user-info table table-responsive" ><tbody><tr><td>Age:</td><td>{{ animAge }}</td></tr><tr><td>Favorite animal:</td><td>{{ animImage }}</td></tr><tr><td>Phone:</td><td><span>{{ countryCode }} </span>{{ animPhone }}</td></tr></tbody></table><p><b >Favorite phrase:</b><span> </span><span>{{ animPhrase }}</span></p></div>
</div>
</div>
<div class="col-sm-8 col-md-9 col-lg-10">
<table class=" user-list table table-striped">
<thead>
<tr>
<td>
<a href="#">
Image
</a>
</td>
<td>
<a href="#">
Name
</a>
</td>
<td>
<a href="#">
Age
</a>
</td>
<td>
<a href="#">
Phone
</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-cloak ng-click="showAnimal()" ng-repeat="animal in userList | orderBy:sortType:sortReverse |filter:searchAnimal">
<td><img ng-src="{{ animal.image }}.svg" class="user-image"></td>
<td>{{ animal.name }}</td>
<td>{{ animal.age }}</td>
<td>{{ animal.phone }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
這裏是角部 angular.module( 'displayApp',[])
.controller('mainController', function($scope, $http) {
$scope.sortType = 'name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchAnimal = ''; // set the default search/filter term
$http.get("data.json")
.then(function(response) {
$scope.userList = response.data;
$scope.animName = $scope.userList[0].name;
$scope.animImage = $scope.userList[0].image;
$scope.animAge = $scope.userList[0].age;
$scope.animPhone = $scope.userList[0].phone;
$scope.animPhrase = $scope.userList[0].phrase;
});
$scope.countryCode = "8";
$scope.showAnimal = function(){
$scope.animName = this.animal.name;
$scope.animImage = this.animal.image;
$scope.animAge = this.animal.age;
$scope.animPhone = this.animal.phone;
$scope.animPhrase = this.animal.phrase;
} });
所以,如果我沒有弄錯,每次使用排序功能時需要獲取數據,還是隻加載一次數據? – mdarmanin
是的,每次點擊排序按鈕和輸入匹配輸入時,邊欄都需要更新。 –
因此需要重新檢索數據? – mdarmanin