Angular JSは検索結果とクリックイベントに基づいてDOM要素を更新します

Question

質問があります。私はjson形式の日付のためのajax呼び出しをテーブルに表示するための角ウェブアプリケーションを作った。それは検索入力、2つのボタン（年齢または名前でソート）を持っています。

クリックテーブルの行でサイドバー（名前、年齢、写真、フレーズ、フレーズ、動物）を更新する方法を管理しましたが、サイドバー情報を同じに更新する必要があります。並べ替えボタンを押します（名前や年齢別に並べ替え、検索入力を行うときにソートします）。クリックされた並べ替えボタンや検索入力に基づいて、この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; 

}}）があります。

Answer 1

ソートボタンの1つをクリックしたときに$ scope.showAnimal関数のデータを更新するには、clickAnimal（）関数を調整する必要があります。これは、並べ替えボタンをクリックすると、動物のデータをテーブルの最初の項目に設定することを意味します。 http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

そして、どのように使われるか$ scope.apply上でこの例：

は$スコープ値を変更する方法の詳細iformationのためにこれを読んで http://jsfiddle.net/k19966h8/

スニペット：もしそうなら

function Ctrl($scope) { 
    $scope.message = "Waiting 2000ms for update"; 

    setTimeout(function() { 
     $scope.$apply(function() { 
      $scope.message = "Timeout called!"; 
     }); 
    }, 2000); 
}