Javascript 使用相同函数angularjs的多表排序_Javascript_Angularjs

Javascript 使用相同函数angularjs的多表排序

javascript angularjs

Javascript 使用相同函数angularjs的多表排序,javascript,angularjs,Javascript,Angularjs,我在Angularjs方面平庸，同样需要帮助。我有两个标题相同的表，表中的数据可能不同，也可能不不同。我需要根据点击标题对数据进行排序。我对两个表使用相同的排序函数。问题是当我点击一个标题时，两个表上的数据都被排序了。我只需要对我单击其标题的表进行排序。请帮忙这是密码 <body ng-app="orderByExample"> <div ng-controller="ExampleController"> <pre>Sorting pre

我在Angularjs方面平庸，同样需要帮助。我有两个标题相同的表，表中的数据可能不同，也可能不不同。我需要根据点击标题对数据进行排序。我对两个表使用相同的排序函数。问题是当我点击一个标题时，两个表上的数据都被排序了。我只需要对我单击其标题的表进行排序。请帮忙

这是密码

<body ng-app="orderByExample">
  <div ng-controller="ExampleController">
    <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
    <hr/>
    <button ng-click="predicate=''">Set to unsorted</button>
    <table class="friend">
      <tr>
        <th>
          <button ng-click="order('name')">Name</button>
          <span ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
        </th>
        <th>
          <button ng-click="order('phone')">Phone Number</button>
          <span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
        </th>
        <th>
          <button ng-click="order('age')">Age</button>
          <span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
        </th>
      </tr>
      <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
        <td>{{friend.age}}</td>
      </tr>
    </table>


      <table class="friend">
      <tr>
        <th>
          <button ng-click="order('name')">Name</button>
          <span ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
        </th>
        <th>
          <button ng-click="order('phone')">Phone Number</button>
          <span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
        </th>
        <th>
          <button ng-click="order('age')">Age</button>
          <span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
        </th>
      </tr>
      <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
        <td>{{friend.age}}</td>
      </tr>
    </table>
  </div>
</body>


(function(angular) {
  'use strict';
angular.module('orderByExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.friends =
        [{name:'John', phone:'555-1212', age:10},
         {name:'Mary', phone:'555-9876', age:19},
         {name:'Mike', phone:'555-4321', age:21},
         {name:'Adam', phone:'555-5678', age:35},
         {name:'Julie', phone:'555-8765', age:29}];
    $scope.predicate = 'age';
    $scope.reverse = true;
    $scope.order = function(predicate) {
      $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
      $scope.predicate = predicate;
    };
  }])
.factory("")
})(window.angular);


排序谓词={{predicate}}；反向={{reverse}}

设置为未排序
名称
电话号码
年龄
{{friend.name}
{{朋友.电话}
{{friend.age}
名称
电话号码
年龄
{{friend.name}
{{朋友.电话}
{{friend.age}
（功能（角度）{
"严格使用",；
angular.module（'orderByExample'，[]））
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.friends=
[{姓名：'John'，电话：'555-1212'，年龄：10}，
{姓名：'Mary'，电话：'555-9876'，年龄：19}，
{姓名：'Mike'，电话：'555-4321'，年龄：21}，
{姓名：'Adam'，电话：'555-5678'，年龄：35}，
{姓名：'Julie'，电话：'555-8765'，年龄：29}]；
$scope.predicate='age'；
$scope.reverse=true；
$scope.order=函数（谓词）{
$scope.reverse=（$scope.predicate==谓词）！$scope.reverse:false；
$scope.predicate=谓词；
};
}])
.工厂（“”）
})（窗口角度）；

两个表在相同的变量上排序，因此它们的显示自然是相同的

我将创建表标识符的顺序和谓词子项-我们将在这里使用t1和t2，但请在您自己的代码中使用更易于识别的内容

$scope.order = function(predicate, tableId) {
  $scope[tableId].reverse = ($scope[tableId].predicate === predicate) ? !$scope[tableId].reverse : false;
  $scope[tableId].predicate = predicate;
};

现在，order函数需要使用该标识符：

<table class="friend">
  <tr>
    <th>
      <button ng-click="order('name','t1')">Name</button>
      <span ng-show="t1.predicate === 'name'" ng-class="{reverse:t1.reverse}"></span>
    </th>
    <th>
      <button ng-click="order('phone','t1')">Phone Number</button>
      <span class="sortorder" ng-show="t1.predicate === 'phone'" ng-class="{reverse:t1.reverse}"></span>
    </th>
    <th>
      <button ng-click="order('age','t1')">Age</button>
      <span class="sortorder" ng-show="t1.predicate === 'age'" ng-class="{reverse:t1.reverse}"></span>
    </th>
  </tr>
  <tr ng-repeat="friend in friends | orderBy:t1.predicate:t1.reverse">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.age}}</td>
  </tr>
</table>

最后，订单函数和中继器需要使用它们的表ID：


名称
电话号码
年龄
{{friend.name}
{{朋友.电话}
{{friend.age}

表2也有同样的想法

如果你需要更大的规模，你可能会想使用某种中继器，而不是我刚才做的。我将把这个练习留给您。

带有隔离作用域的指令的解决方案将非常吸引人。完整的解决方案将包含来自服务或工厂的friends集合，以便演示文稿中的隔离作用域能够正确工作。我们并没有试图混淆新的Angular开发者：）谢谢Lathejockey81:）

<table class="friend">
  <tr>
    <th>
      <button ng-click="order('name','t1')">Name</button>
      <span ng-show="t1.predicate === 'name'" ng-class="{reverse:t1.reverse}"></span>
    </th>
    <th>
      <button ng-click="order('phone','t1')">Phone Number</button>
      <span class="sortorder" ng-show="t1.predicate === 'phone'" ng-class="{reverse:t1.reverse}"></span>
    </th>
    <th>
      <button ng-click="order('age','t1')">Age</button>
      <span class="sortorder" ng-show="t1.predicate === 'age'" ng-class="{reverse:t1.reverse}"></span>
    </th>
  </tr>
  <tr ng-repeat="friend in friends | orderBy:t1.predicate:t1.reverse">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.age}}</td>
  </tr>
</table>