Question

我正在尝试过滤确切类型的所选项目... 我知道内置过滤器，但无法解决我的问题..我要自定义...

首先看到我当前的代码：

foreach ($q_id as $val) {
    $j =$obj->selectOptions($val);

<!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时，它应该只显示非常糟糕的类型。我如何完成它？我尝试了很多但都失败了...

在这种情况下有人可以帮助我吗？

Answer 1

您可以在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>

具有确切类型的AngularJS自定义过滤器

1 个答案: