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

我有个问题。我制作了一个angular web应用程序，其中包含一个ajax调用，用于在表中显示json格式的日期。它有一个搜索输入，两个按钮（按年龄或姓名排序）。它还有一个外形（边栏元素）

我已经设法在单击表行上更新侧栏（名称、年龄、图片、短语、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>

}

---

});

单击其中一个排序按钮时，需要调整clickAnimal（）函数以更新$scope.showAnimal函数中的数据。这意味着在单击排序按钮时，将动物数据设置为表中的第一项

有关如何更改$scope值的更多信息，请阅读此内容：

下面是有关如何使用$scope.apply的示例：

片段：

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

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

---

因此，如果我没有弄错的话，每次使用排序功能时都需要获取数据，或者数据只加载一次？是的，每次单击排序按钮以及输入匹配的输入时都需要更新侧栏，因此需要再次检索数据？？您需要调整clickAnimal（）函数更新$scope.showAnimal函数中的数据。感谢angular doc的哪一部分最适合查找？谢谢，所以我应该查找apply and watch？是的，据我所知，apply和watch是这个更新过程不可分割的一部分。我想知道如果我编写了排序函数，它将返回一个排序元素数组，然后我将为我的边栏设置变量的新值，会怎么样

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

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