如何计算 AngularJS 中的数组项？

在 AngularJS 中，计算数组项可以使用 $filter 服务中的 filter 方法或 ng-repeat 指令中的一些常用属性，如 limitTo、orderBy、filter 等。

使用 $filter 服务

$filter 服务提供了许多可用于过滤和排序数据的方法。其中，filter 方法可以用于计算数组项，并返回符合条件的项数组。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $filter) {
  $scope.numbers = [1, 2, 3, 4, 5];
  $scope.searchNumber = function() {
    $scope.filteredNumbers = $filter('filter')($scope.numbers, $scope.searchText);
  };
});

在上述代码中，我们定义了一个名为 numbers 的数组，并定义了一个可以接受用户输入的 searchText 变量。searchNumber 函数使用 $filter 服务的 filter 方法对 numbers 数组进行过滤，并将结果保存在 filteredNumbers 变量中。

使用 ng-repeat 指令的常用属性

ng-repeat 指令常用属性有 limitTo、orderBy、filter 等，它们可以用于计算数组项并返回符合条件的项数组。

limitTo

limitTo 属性可以限制 ng-repeat 指令显示的项数。

<ul>
  <li ng-repeat="number in numbers | limitTo:3">{{number}}</li>
</ul>

在上述代码中，我们使用 limitTo 属性指定只显示 numbers 数组的前三项。

orderBy

orderBy 属性可以对 ng-repeat 指令中的项数组进行排序。

<ul>
  <li ng-repeat="number in numbers | orderBy:'-valueOf()'">{{number}}</li>
</ul>

在上述代码中，我们使用 orderBy 属性对 numbers 数组的项按照值的倒序进行排序。

filter

filter 属性可以过滤 ng-repeat 指令中的项数组。

<input type="text" ng-model="searchText">
<ul>
  <li ng-repeat="number in numbers | filter:searchText">{{number}}</li>
</ul>

在上述代码中，我们使用 filter 属性对 numbers 数组进行过滤，显示符合用户输入的数字项。

总结

使用 $filter 服务和 ng-repeat 指令中的常用属性，可以很方便地计算数组项并返回符合条件的项数组。在实际开发中，可以根据业务需求选择其中适合的方法进行使用。