Как фильтровать массив, если фильтр находится в угловой директиве?

Я пытаюсь создать общую директиву для фильтрации массива в угловом формате.Как фильтровать массив, если фильтр находится в угловой директиве?

<body ng-controller="MainCtrl"> 
    controller: <input type="text" ng-model="query.name" /> - work<br> 
    directive: <span filter by="name"></span> - not work 
    <ul> 
     <li ng-repeat="item in list | filter:query">{{item.name}}</li> 
    </ul> 
</body>

контроллер и директивы являются:

app.controller('MainCtrl', function($scope) { 
    $scope.list = [ 
     {id: 1, name:'aaa'}, 
     {id: 2, name:'bbb'}, 
     {id: 3, name:'ccc'} 
    ]; 
}); 

app.directive('filter', function() { 
    return { 
     scope: { 
      by: '@' 
     }, 
     link: function postLink(scope, element, attrs) { 
      element.append(
       '<input type="text" ng-model="query.' + attrs.by + '">'); 
     } 
    } 
});

фильтр в работах контроллер, но фильтр в директиве не делает. Я не знаю, как это исправить.

Решение фиксируется в plunker: http://plnkr.co/edit/WLGd6RPQEwMFRBvWslpt?p=preview

источник

2013-04-29 MarekLi

Это очень странный подход к фильтрации. Даже если вы можете динамически добавлять элементы, подобные тому, что вы делаете с помощью 'link',' query.name' никогда не будет разрешаться внутри вашей директивы, потому что вы изолировали свою область (вам нужно будет использовать '$ parent.query.name' , что не является хорошей идеей). – Langdon

Да, это выглядит странно, потому что я упростил его больше, чем было необходимо. Я использовал ссылку, потому что иногда мне нужно создать '

Так как вы выделили области действия, вы должны использовать Eiter $ родителя или вы должны создать два способа связывания с помощью «=» я есть обновить ваш пример с привязкой два пути

<!doctype html> 
<html ng-app="plunker" > 
<head> 
    <meta charset="utf-8"> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-controller="MainCtrl"> 
    controller: <input type="text" ng-model="query.name" /> - work<br> 
    directive: <span filter by="query"></span> - not work 
     <ul> 
     <li ng-repeat="item in list | filter:query">{{item.name}}</li> 
    </ul> 
    <script> 
     var app = angular.module('plunker', []); 

     app.controller('MainCtrl', function ($scope) { 
      $scope.list = [ 
       { id: 1, name: 'aaa' }, 
       { id: 2, name: 'bbb' }, 
       { id: 3, name: 'ccc' } 
      ]; 
      alert("123"); 
      $scope.query = { name: "" } 
     }); 

     app.directive('filter', function() { 
      return { 
       scope: { 
        by: '=' 
       }, 
       replace: true, 
       template:'<input ng-model="by.name"></input>' 

      } 
     }); 
    </script> 
</body> 

</html>

источник

2013-04-29 17:17:33

спасибо, но вы использовали 'name' внутри директивы. Но мне нужно создать общую директиву, которая не знает о столбцах данных. Поэтому моя основная проблема заключается в том, как передать имя столбца в переменной. Теперь это 'имя', но для другого набора данных будет что-то еще – MarekLi

@MarekL, тогда вам просто нужно указать' by = "query.name" и изменить свою директиву, чтобы сказать 'ng-model =" на: ': http: //jsfiddle.net/SCvJn/ – Langdon

Как фильтровать массив, если фильтр находится в угловой директиве?

ответ

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