Пользовательский фильтр AngularJS с точным типом - PullRequest
Новая
       9

Пользовательский фильтр AngularJS с точным типом

0 голосов
/ 09 июля 2019

Я пытаюсь отфильтровать выбранный элемент с точным типом ... Я знаю, что встроенный фильтр есть, но он не может решить мою проблему .. Я хочу пользовательский ...

Сначала посмотрите мой текущий код: 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="namesCtrl">

    <select>
        <option value="RICH">Rich</option>
        <option value="POOR">POOR</option>
        <option value="EXTREM POOR">EXTREM POOR</option>
        <option value="VERY POOR">VERY POOR</option>
        <option value="VERY RICH">VERY RICH</option>
      </select> 


<table border="1" width="100%">
    <tr>
    <th>Name</th>
    <th>Country</th>
    <th>Type</th>
    </tr>
    <tr ng-repeat="x in names | filterType">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
    <td>{{x.type}}</td>
    </tr>
    </table>

<script>

var app = angular.module('myApp', []);
app.filter('filterType', function() {
    return function (item) {
        if (item == undefined) {
            item = [];
        }
        return item.sort((a,b) => a.type.localeCompare(b.type))
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = [
    {name:'Jani',country:'Norway', type: 'RICH'},
    {name:'Carl',country:'Sweden', type: 'POOR'},
    {name:'Margareth',country:'England', type: 'EXTREM POOR'},
    {name:'Hege',country:'Norway', type: 'RICH'},
    {name:'Joe',country:'Denmark', type: 'VERY POOR'},
    {name:'Gustav',country:'Sweden', type: 'VERY POOR'},
    {name:'Birgit',country:'Denmark', type: 'VERY RICH'},
    {name:'Mary',country:'England', type: 'RICH'},
    {name:'Kai',country:'Norway', type: 'POOR'}
    ];
});
</script>

</body>
</html>

Когда хотите, когда я выбираю rich, он должен показывать только богатый тип .., а когда я выбираю very poor, он должен показывать мне только очень плохой тип. Как я могусделай это?Я много пробовал, но потерпел неудачу ...

Кто-нибудь может мне помочь в этом случае?

1 Ответ

4 голосов
/ 09 июля 2019

Вы можете использовать ng-model для элемента select, чтобы сохранить выбранный в данный момент параметр.Затем вы можете передать его в качестве аргумента фильтра как x in names | filterType:selected и отфильтровать все элементы по выбранному типу: 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="namesCtrl">

    <select ng-model="selected">
        <option value="RICH">Rich</option>
        <option value="POOR">POOR</option>
        <option value="EXTREM POOR">EXTREM POOR</option>
        <option value="VERY POOR">VERY POOR</option>
        <option value="VERY RICH">VERY RICH</option>
      </select> 


<table border="1" width="100%">
    <tr>
    <th>Name</th>
    <th>Country</th>
    <th>Type</th>
    </tr>
    <tr ng-repeat="x in names | filterType:selected">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
    <td>{{x.type}}</td>
    </tr>
    </table>

<script>
var app = angular.module('myApp', []);
app.filter('filterType', function() {
    return function (items, selectedType) {
        return items.filter(function(item) {
            return item.type === selectedType
        })
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.selected = 'RICH';
    $scope.names = [
    {name:'Jani',country:'Norway', type: 'RICH'},
    {name:'Carl',country:'Sweden', type: 'POOR'},
    {name:'Margareth',country:'England', type: 'EXTREM POOR'},
    {name:'Hege',country:'Norway', type: 'RICH'},
    {name:'Joe',country:'Denmark', type: 'VERY POOR'},
    {name:'Gustav',country:'Sweden', type: 'VERY POOR'},
    {name:'Birgit',country:'Denmark', type: 'VERY RICH'},
    {name:'Mary',country:'England', type: 'RICH'},
    {name:'Kai',country:'Norway', type: 'POOR'}
    ];
});
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...