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があります。これにより、問題の詳細な説明が得られるはずです。検索ボタンを押すと、検索結果が表示されません。

私はこの1つに似た2番目の質問を開いていますが、回答はありませんでした。これは私の2番目の試みで、少し異なる説明があります。

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

をコントローラをinstantialingされているソリューションです。

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

おかげで、 パラス