javascript - 使用 javascript 或 angularJS 更改 html 中的 ng-repeat 值

Question

当用户单击“按书名排序”按钮时，我想将 HTML 中的“ng-repeat="x in books”更改为 ng-repeat="x in books|orderBy:'country'”。

如何在 javascript/Angular 中创建该操作？

https://jsfiddle.net/dbxtcw9w/

<section id="App2" ng-app="form-input" ng-controller="ctrl">
  <summary class="row book-component">
     <div  ng-repeat='x in books' class="col-md-12 col-sm-12 col-xs-12" >
       <img class="thumbnail-image" > 
         <div> 
            <h2 ng-bind="x.title" class="title"></h2>
            <h4 ng-bind="x.author" class="author" style="color:grey;"></h4>
            <hr>
            <h5>FREE SAMPLE <span class="review" onclick="review(this)">REVIEW</span></h5>
         </div> 
     </div>
  </summary> 
  <button style="margin-top:30px" class="btn-lg btn-success" 
  ng-click="sort()" onclick="sort()">Sort by book title</button>
</section>
<script>
  var app2 = angular.module('form-input', []);
    app2.controller('ctrl', function($scope) { 
    $scope.books=[
      {title:'Jani',author:'Norway'},
      {title:'Hege',author:'Sweden'}
    ];       
  })
</script>

Answer 1

使订单过滤器等于一个变量，然后通过调用 Controller 中接收字段作为参数的函数，使用 ng-click 更改该变量:

<section id="App2" ng-app="form-input" ng-controller="ctrl">
  <summary class="row book-component">
     <div  ng-repeat='x in books | orderBy: order' class="col-md-12 col-sm-12 col-xs-12" >
       <img class="thumbnail-image" > 
         <div> 
            <h2 ng-bind="x.title" class="title"></h2>
            <h4 ng-bind="x.author" class="author" style="color:grey;"></h4>
            <hr>
            <h5>FREE SAMPLE <span class="review" onclick="review(this)">REVIEW</span></h5>
         </div> 
     </div>
 </summary> 
 <button style="margin-top:30px" class="btn-lg btn-success" ng-click="changeOrder('title')">Sort by book title</button>
</section>

Javascript:

  var app2 = angular.module('form-input', []);
  app2.controller('ctrl', function($scope) { 
    $scope.order = 'author';
    $scope.books=[
      {title:'Jani',author:'Norway'},
      {title:'Hege',author:'Sweden'}
    ];       
    $scope.changeOrder = function (order) {
        $scope.order = order;
    };
  });

https://jsfiddle.net/dbxtcw9w/1/