AngularJS beberapa filter dengan fungsi filter kustom


95

Saya mencoba memfilter daftar dengan beberapa filter + dengan fungsi filter kustom.

Contoh asli jsfiddle yang berfungsi adalah http://jsfiddle.net/ed9A2/1/ tetapi sekarang saya ingin mengubah cara filter usia.

Saya ingin menambahkan filter kustom sehingga usia itu memfilter berdasarkan dua nilai input yaitu min_age dan max_age , (antara usia).

Setelah melihat doc. Saya menemukan orang-orang memiliki pertanyaan serupa dan pengguna Mark Rajcok menjawab http://docs.angularjs.org/api/ng.filter:filter#comment-648569667 terlihat bagus dan seharusnya berfungsi. Tetapi saya mengalami masalah dalam menerapkannya ke dalam kode saya yang terutama karena saya memiliki beberapa filter lainnya.

Saya sangat baru di AngularJS :(

Biola yang saya coba dan TIDAK berfungsi ada di sini http://jsfiddle.net/ed9A2/20/

Salinan tempel kode TIDAK saya yang berfungsi ada di sini

Melihat

<div ng-app ng-controller="MainController">
<table class="fancyTable">
    <tr>
        <th>Player id</th>
        <th>Player name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td><input ng-model="player_id" /></td>
        <td><input ng-model="player_name" /></td>
        <td>
            Min Age:<input ng-model="min_age" />
            Max Age:<input ng-model="max_age" />
        </td>
    </tr>
    <tr ng-repeat="player in players | filter:{id: player_id, name:player_name, age:ageFilter}">
        <td>{{player.id}}</td>
        <td>{{player.name}}</td>
        <td>{{player.age}}</td>
    </tr>
</table>

Kontroler

function MainController($scope) {

$scope.player_id = "";
$scope.player_name = "";
$scope.player_age = "";
$scope.min_age = 0;
$scope.max_age = 999999999;

$scope.ageFilter = function(player) {
    return ( player > $scope.min_age && player.age < $scope.max_age);
}

$scope.players = [
        {"name": "Rod Laver",
            "id": "rod",
            "date": "1938/8/9",
            "imageUrl": "img/rod-laver.gif",
            "age": 75},
        {"name": "Boris Becker", 
            "id": "borix",
            "date": "1967/11/22",
            "imageUrl": "img/boris-becker.gif",
            "age": 45},
        {"name": "John McEnroe",
            "id": "mcenroe",
            "date": "1959/2/16",
            "imageUrl": "img/john-mc-enroe.gif",
            "age": 54},
        {"name": "Rafa Nadal",
            "id": "nadal",
            "date": "1986/5/24",
            "imageUrl": "img/ndl.jpg",
            "age": 27}
    ]
}

Jawaban:


197

Coba ini:

<tr ng-repeat="player in players | filter:{id: player_id, name:player_name} | filter:ageFilter">

$scope.ageFilter = function (player) {
    return (player.age > $scope.min_age && player.age < $scope.max_age);
}

7

Semoga jawaban di bawah ini di tautan ini akan membantu, Filter Nilai Ganda

Dan lihat biola dengan contoh

arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}

biola


yang satu ini mengembalikan semua hasil jika tidak menemukan atribut yang dicari dalam daftar, bagaimana saya bisa membalikkan perilaku ini dan tidak mengembalikan hasil jika nilainya tidak ada dalam daftar?
Zakaria Belghiti

0

File dalam tampilan (HTML atau EJS)

<div ng-repeat="item in vm.itemList  | filter: myFilter > </div>

dan Di Controller

$scope.myFilter = function(item) {
return (item.propertyA === 'value' || item.propertyA === 'value');
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.