數據綁定到在角

Question

篩選我有一個簡單的分頁字母：

<div ng-controller="DataController"> 
    <ul class="pagination"> 
    <li ng-repeat="letter in data_letters"> 
     <a href="#" ng-click="setLetter(letter)">{{letter}}</a> 
    </li> 
    </ul> 
    <table class="table table-striped"> 
    <tbody> 
     <tr> 
     <th>Name</th> 
     <th>State</th> 
     </tr> 
     <tr ng-repeat="person in persons | startsWithLetter:letter"> 
     <td>{{person.Name}}</td> 
     <td>{{person.State}}</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

什麼是綁定信（上，我們點擊了paginaton）表過濾器最簡單的方法。 這裏是一個功能齊全的plunkr：http://plnkr.co/edit/Trr5LzrcMfZqonD0jvjX?p=preview

我已經實現了一切。這只是缺少的數據綁定。有任何想法嗎？

Answer 1

一個與你的代碼的問題是，你是不必要的注射$範圍到過濾器：

app.filter('startsWithLetter', function($scope) { 

應該是

app.filter('startsWithLetter', function() { 

另一個問題是使用'C-D'作爲過濾器值。我會改變$ scope.data_letters是包含一個鍵/值對這樣的對象的數組：

$scope.data_letters = [{ 
    key: 'A', 
    value: "A" 
}, { 
    key: "B", 
    value: "B" 
}, { 
    key: ['C', 'D'], 
    value: "C-D" 
}]; 

然後改變你的支票在過濾器來評估所有的鑰匙，就像這樣：

angular.forEach(letters, function(letter, key) { 
    if (itemName.startsWith(letter)) { 
     filtered.push(items[i]); 
    } 
    }); 

你可以看到它的工作here在哪裏我分叉你的plunk。

Answer 2

更新您的普拉克here

的問題是，你的過濾器不被認可的角度。 此外，我會建議使用

Chrome開發者工具

它顯示有用的調試信息

app.filter('startsWithLetter', function() { 

    console.log("Inside startsWithLetter"); 
    return function(items, letter) { 

    console.log("Inside Filter: Starts with " + letter); 
    var filtered = []; 
    for (var i = 0; i < items.length; i++) { 
     var itemName = items[i].Name; 

     if (itemName.startsWith(letter)) { 
     filtered.push(items[i]); 
     } 
    } 
    return filtered; 
    }; 
});