ui-bootstrap与过滤器分页

Question

经过一些研究和实例研究后，我实现了一个带过滤函数的pagniation。

我对角度很新，所以如果这个应用程序没问题或者它有一些错误/逻辑错误，我需要你的帮助。

目标是选择一个集合（在此应用程序中为load1或load2）并创建新对象，操作现有对象或删除其中一些对象。在每次更新数据时，都必须检查分页是否与集合大小同步。 如果用户在搜索字段中输入内容，则会触发控制器中的观察者以更新过滤后的数据：

$scope.$watch('search.name', function (newVal, oldVal) {
    $scope.filtered = filterFilter($scope.items, {name: newVal});
}, true);

如果有些角色专业人士可以查看此代码并给我一些反馈，我将非常高兴。我想在一个高效的系统中使用它，所以每个答案都会很棒！

这是一个有效的傻瓜：https://unix.stackexchange.com/questions/68523/find-and-remove-large-files-that-are-open-but-have-been-deleted

谢谢！

Answer 1

如果您在整个大型应用程序中明确使用它们，那么观察者很重要。 请改用ng-change。此外，通过将true传递给该观察者意味着您正在深入观察哪个实际上是一件坏事，因为它将检查阵列中对象的每个属性，这是性能密集型的。

由于某种原因我无法看到您需要旧值和新值，因此您只需使用$scope.search.name即可。每当您输入内容时，$scope.search.name都会有更新的值。只需要在ng-change上调用一个函数。

DEMO：http://plnkr.co/edit/TWjEoM3oPdfrHfcru7LH?p=preview

删除手表并使用：

$scope.updateSearch = function () {
    $scope.filtered = filterFilter($scope.items, {name: $scope.search.name});
};

在HTML中：

<label>Search:</label> <input type="text" ng-model="search.name" placeholder="Search" ng-change="updateSearch()" />

Answer 2

以前的答案仍然是正确的，但您必须确保替换分页标记内的“页面”并将其更改为ng-model。

来自更改日志（https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md）

自0.11.0起：

分页和寻呼机现在都与ngModelController集成。

• 页面已从ng-model中替换。