gpt4 book ai didi

angularjs - 棱 Angular 分明。如何过滤 Controller 中的动态数组?

转载 作者:行者123 更新时间:2023-12-03 21:36:32 24 4
gpt4 key购买 nike

有人可以帮我解决问题吗?nf n 我有一组显示在表格中的对象,并且我进行了搜索。每个对象都是表中的一行。主要问题是数组。我们可以随时修改它(可以添加新行、删除现有行和更改表中的值),即使我们搜索某些内容。

现在我有这样的事情:

$scope.$watch( 'search', function() {
if($scope.search!== "") {
if(! $scope.initArray.length) {
$scope.initArray= $scope.array;
}
$scope.array= $filter('filter')($scope.initArray, function(item) {
return item.name1.indexOf($scope.search) > -1 ||
item.name2.indexOf($scope.search) > -1 ||
item.name3.toLowerCase().indexOf($scope.search) > -1;
});
} else {
$scope.array= $scope.initArray;
}
});

如您所见,我使用了两个数组。一切都很好,但是当我想更改 $scope.array 时,我必须更改 $scope.initArray。它会导致很多问题。

例如,表有 3 行。每行由3个colomns组成。我搜索了一些东西,它只找到了一行(搜索必须至少在其中一个列中找到值)。之后我添加新行。如果它包含我正在搜索的值,它会显示在表格中。如果我们清除搜索字段,所有数据都会显示回来。对于这种正确的行为,我必须对 $scope.initArray 和 $scope.array 进行大量相同的操作。如果我只使用一个数组,搜索表包含不正确的数据后。

有没有一种方法可以只使用一个数组?

$scope.array 我将它传递给 UI。

$scope.initArray 它是初始数据(搜索前)

最佳答案

有两种方法可以只保留一份数据副本:

  • 过滤模板中的数据而不是 Controller 中的数据
  • 在模板中使用函数作为数据源

  • 这是两种方法的演示:

    angular.module('filterExample', [])
    .filter('myFilter', function() {
    return function(input) {
    var output = [];
    for (var idx in input) {
    var item = input[idx];
    if (item != 'row2') {
    output.push(item.toUpperCase());
    }
    }
    return output;
    };
    })
    .controller('MyController', ['$filter', function($filter) {
    this.data = ['row1', 'row2', 'row3'];
    this.getFilteredData = function(input) {
    // here you can use this.search to filter the data
    // while keeping the original array unmodified
    return $filter('myFilter')(this.data);
    };
    }]);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <body ng-app="filterExample">
    <h2>Initial data</h2>
    <table ng-controller="MyController as ctrl">
    <tr ng-repeat="row in ctrl.data">
    <td>{{row}}</td>
    </tr>
    </table>
    <h2>Filtered data, use filter in the template</h2>
    <table ng-controller="MyController as ctrl">
    <tr ng-repeat="row in ctrl.data | myFilter">
    <td>{{row}}</td>
    </tr>
    </table>
    <h2>Filtered data, filter data in the function</h2>
    <table ng-controller="MyController as ctrl">
    <tr ng-repeat="row in ctrl.getFilteredData()">
    <td>{{row}}</td>
    </tr>
    </table>
    </body>
    </html>

    关于angularjs - 棱 Angular 分明。如何过滤 Controller 中的动态数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35181256/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com