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

谢谢，第

ng-repeat不在控制器

2 个答案: