ng-repeat not render array изменения в контроллере

У меня есть список элементов, отображаемых на странице с помощью ng-repeat. Ниже приведен html.ng-repeat not render array изменения в контроллере

<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 с воссозданной проблемой. Это должно дать более подробное описание проблемы. Когда я набираю что-то для поиска и нажимаю кнопку поиска, представление не показывает результаты поиска.

У меня есть второй открытый вопрос, похожий на этот, но он остался без ответа. Это моя вторая попытка с немного иным объяснением.

источник

2017-01-16 pparas

Вы пробовали объявляющие $ scope.searchResults вне метода, увидеть, если он изменяет то? – rrd

, что дает мне несколько вещей, о которых стоит подумать. Я получаю пустой массив вне метода – pparas

Можете ли вы регистрировать результаты $ scope.items в этом контроллере? Имеет ли он содержимое? – rrd

Вызов $ location.url ("/ search"); вы instantialing контроллера снова, так что вы будете иметь пустой $ 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);

источник

2017-01-16 20:10:16 Elgayed

Вот решение.

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

Спасибо, Paras

источник

2017-01-30 22:02:22 pparas

ng-repeat not render array изменения в контроллере

ответ

Смежные вопросы