ng-repeat 不在控制器中呈现数组更改

Question

我有一个使用 ng-repeat 显示在页面上的项目列表。下面是html。

<div class="container-fluid"> 
  <div class="container" >
    <div class="page-header">
        <h3>Found {{searchResults.length}} results that match your search <br /><small>Click on any result to view details</small></h3>
    </div>
    ----
    <div class="list-group" ng-repeat="item in searchResults track by $index">
        <a ng-href="#" class="list-group-item">
            <h4 class="list-group-item-heading">{{item.test_name}}</h4>
            <p class="list-group-item-text" ng-bind-html="item.synonyms"></p>
        </a>
    </div>
</div>

这个数组是在应用程序加载时创建的。下面是控制器中修改数组的函数。

当用户在搜索框中键入内容并点击搜索时，我希望位置发生变化，如代码所示，并使用 ngrepeat 指令显示结果列表。

$scope.onClickSearch = function () {
    console.log("Search Click in Controller - " + $scope.searchString);
    $scope.searchResults = new Array();

    /*
        remove special characters and html tags from the synonyms and check if the name 
        or synonym contains the search string.
    */
        for (i = 0; i < $scope.items.length; i++) {
            var synonyms = $scope.items[i].synonyms
            var testName = $scope.items[i].test_name.toLowerCase();
            if ((testName.indexOf($scope.searchString) > -1) || (synonyms.indexOf($scope.searchString) > -1)) {
                var searchItem = $scope.items[i];
                $scope.searchResults.push(searchItem);
            }
        };
        $location.url("/search");
    });
    console.log($scope.searchResults); //Array is shown to be updated here.

函数更新数组时，页面显示的html并没有改变。 控制台中的日志显示正确。我试过$scope.$digest() 和$scope.$apply() 结果没有变化。

这是一个plunker 与重新创建的问题。这应该对问题进行更详细的描述。当我输入要搜索的内容并点击搜索按钮时，视图不显示搜索结果。

我有第二个问题与这个问题类似，但没有得到解答。这是我的第二次尝试，解释略有不同。

Answer 1

通过调用 $location.url("/search");您正在再次实例化控制器，因此您将有一个空的 $scope.searchResults 即使在重新实例化控制器后，也可以使用 $rootScope 来保留您的数据

    catalogEditor.controller('searchController', ['$scope', '$http', 'DataFactory', '$location', '$timeout', '$rootScope'
    , function ($scope, $http, DataFactory, $location, $timeout, $rootScope) {

...
    $scope.onClickSearch = function () {
    console.log("Search Click in Controller - " + $scope.searchString);
    $rootScope.searchResults = new Array();
        for (i = 0; i < $scope.items.length; i++) {
            var synonyms = $scope.items[i].synonyms
            var testName = $scope.items[i].test_name.toLowerCase();
            if ((testName.indexOf($scope.searchString) > -1) || (synonyms.indexOf($scope.searchString) > -1)) {
                var searchItem = $scope.items[i];
                $rootScope.searchResults.push(searchItem);
            }
        };
        $location.url("/search");
    });
    console.log($rootScope.searchResults); 

Answer 2

这里是解决方案。

catalogEditor.controller('searchController', ['$scope', '$http', 'DataFactory', '$location', '$timeout', '$route', '$routeParams'
                                        , function ($scope, $http, DataFactory, $location, $timeout, $route, $routeParams) {

$scope.items = DataFactory.getSearchScope();
$scope.selectedCatalogCd = '';
$scope.searchString = '';
// Get our stored data, or, a blank array;
$scope.searchResults = DataFactory.get() || [];

function init() {
    $route.reload(); // had to force a reload for the changes to be displayed
}

$scope.onItemSelected = function () {
    console.log("In Controller - " + $scope.selectedCatalogCd);
    $location.path("/details/" + $scope.selectedCatalogCd + ".json");
};

$scope.onClickSearch = function () {
    console.log("Search Click in Controller - " + $scope.searchString);
    /*
        remove special characters and html tags from the synonyms and check if the name 
        or synonym contains the search string.
    */
    $scope.searchResults = [];
    for (i = 0; i < $scope.items.length; i++) {
        var synonyms = $scope.items[i].synonyms
        if (synonyms !== "") {
            synonyms = synonyms.replace(/(<(\s*)(br)(\s*)>)/gi, ' ');
            synonyms = synonyms.replace(/[^\w\s]/gi, '').toLowerCase();
        }
        var testName = $scope.items[i].test_name.toLowerCase();
        if ((testName.indexOf($scope.searchString.toLowerCase()) > -1) || (synonyms.indexOf($scope.searchString) > -1)) {
            var searchItem = $scope.items[i];
            $scope.searchResults.push(searchItem);
        }
    }
    // Store the data;
    console.log("New Size of Search Results - ", $scope.searchResults.length);
    DataFactory.set($scope.searchResults);
    $scope.searchResults = [];
    if ($location.path() !== '/search') {
        $location.path("/search");
        $location.replace();
    } else {
        init();
    }
};
}])

这有点笨拙，但很有效。我找不到其他解决方案。该应用程序不是一个非常高流量的应用程序，所以它会做得很好。 这是更新的 plunker https://plnkr.co/t0CjyI8RG5d5tm2qGXDp

谢谢， 帕拉斯