如果濾波器在角度指令中，如何過濾數組？

我嘗試創建通用指令來過濾角度中的數組。如果濾波器在角度指令中，如何過濾數組？

<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 2013-04-29 17:00:05

是的，這看起來很奇怪，因爲我比必要時簡化了它。我使用鏈接，因爲有時我需要創建'

既然你已經隔離，你必須使用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'。但是我需要創建一個不知道數據列的通用指令。所以我的主要問題是如何在變量中傳遞列名。現在它是'name'，但對於其他數據集將是其他任何東西 – MarekLi 2013-04-29 19:28:52

@MarekL那麼你只需要指定'by =「query.name」'並通過「'來改變你的指令來說'ng-model ='：http： //jsfiddle.net/SCvJn/ – Langdon 2013-04-30 02:34:12

如果濾波器在角度指令中，如何過濾數組？

回答

相關問題