Угловое: применение фильтров к ng-repeat

Я пытаюсь применить фильтр к массиву, так как он изменяется в JS, он возвращается обратно в HTML (из-за двусторонней привязки). Это контроллер я использую:Угловое: применение фильтров к ng-repeat

app.controller('controlador1', ["filterFilter", "$scope", function(filterFilter, $scope) { 

    this.array = [ 
    {name: 'Tobias'}, 
    {name: 'Jeff'}, 
    {name: 'Brian'}, 
    {name: 'Igor'}, 
    {name: 'James'}, 
    {name: 'Brad'} 
    ]; 
    var active = false; 
    $scope.applyFilter = function(){ 
    if(!active){ 
    $scope.arrayFiltrado = filterFilter(this.array, "a"); 
    active = true; 
    }else{ 
    $scope.arrayFiltrado = this.array; 
    active = false; 
    } 
    } 
    $scope.arrayFiltrado = this.array; 

}]);

Кроме того, это мой шаблон HTML:

<!DOCTYPE html> 
<html ng-app="miApp"> 
    <head> 
     <meta charset="UTF-8"> 
     <script src="angular.js"></script> 
     <script src="mainmodule.js"></script> 
     <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> 
    </head> 
<body ng-app="miApp" ng-controller="controlador1"> 
<button type="button" class="btn btn-default" ng-click="applyFilter()">button</button> 
<span ng-repeat="elem in arrayFiltrado">{{elem.name+" "}}</span> 
</body> 
</html>

Я хочу, чтобы применить/отключить фильтр, когда я нажимаю кнопку, но независимо от того, что я do, если я нажму кнопку, в HTML ничего не отображается. Это похоже на то, что массив стирается.

Может ли кто-нибудь сказать мне, что мне здесь не хватает?

источник

2016-01-28 Zerok

бы нужно увидеть 'filterFilter' – Raulucco

фильтр работает правильно. Если я просто применил одно действие фильтрации в начале, оно работает. Проблема возникает, когда я запускаю опцию ng-click, что приводит к исчезновению списка имен. – Zerok

Вы можете использовать только угловой привязки, чтобы сделать это. Это позволяет избежать большого количества кода на вашем контроллере и упростить логику.

app.controller('controlador1', ["filterFilter", "$scope", function(filterFilter, $scope) { 
    $scope.active = false; 

    $scope.arrayFiltrado = [ 
     {name: 'Tobias'}, 
      {name: 'Jeff'}, 
      {name: 'Brian'}, 
      {name: 'Igor'}, 
      {name: 'James'}, 
      {name: 'Brad'} 
     ]; 

    $scope.filtering = function(item) { 
     if(!$scope.active) { 
      return true; 
     } 
     return item.name.indexOf('a') !== -1; 
    } 
}]);

HTML

<body ng-app="miApp" ng-controller="controlador1"> 
    <button type="button" class="btn btn-default" ng-click="active = !active">button</button> 
    <span ng-repeat="elem in arrayFiltrado | filter:filtering">{{elem.name+" "}}</span> 
</body>

источник

2016-01-28 13:42:07

Ваш код отлично работает! Итак, я вижу, что я не могу привязывать данные к нормальному элементу JS, но к элементу углового? – Zerok

Основная проблема исходит от «этого»: она зависит от контекста. Вам следует избегать его использования (пока вы не переключитесь на ES6;), потому что это не то же самое «это» в вашем контроллере, а в функции applyFilter. Просто используйте 'var array' или '$ scope.array' –

Если фильтр работает правильно, то вместо this.array вы должны использовать $scope.array

$scope.array = [....];

$scope.arrayFiltrado = filterFilter($scope.array, "a"); 
$scope.arrayFiltrado = $scope.array;

источник

2016-01-28 13:32:21

Угловое: применение фильтров к ng-repeat

ответ

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