Angular JS根据搜索结果和单击事件更新DOM元素

Question

I've got a question. I made an angular web app which involves an ajax call for json-formatted dates to display them in a table. It has a search input, two buttons (sort by age or name). It also has a profile(sidebar element),

I've managed how to update sidebar (name, age, pic, phrase, fav animal) on click table rows, but I need to update sidebar info the same when I press the sorting buttons (sort by name or age and when I make search inputs) I have to fill sidebar somehow with this json data, based on clicked sort buttons or search inputs. Many thanks in advance!

here is html part

<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>

Here is angular part 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

You need to adjust the clickAnimal() function to update the data in the $scope.showAnimal function when you click one of the sort buttons. This would mean setting the animal data to the first item in the table when a sort button is clicked.

Read this for more iformation on how to change $scope values: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

And this example on how $scope.apply is used: http://jsfiddle.net/k19966h8/

A snippet:

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

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