Question

尝试创建一个过滤器，当点击名称时会显示该特定名称：

{'username': 'julio', 'status': 'created'}, {'username': 'julio', 'status': 'running'}.

然后，如果单击一个条件，则只显示具有以下条件的一个对象：

{'username': 'julio', 'status': 'created'}

请p：plunkr：http://plnkr.co/edit/qDUvvBWQtNrLTLgSC8Yq?p=preview

angular.module('app', [])
  .controller('Ctrl', function ($scope) {
  $scope.users = [
    {'username': 'julio', 'status': 'created'},
    {'username': 'julio', 'status': 'running'},
    {'username': 'phillip', 'status': 'running'},
    {'username': 'mats', 'status': 'created'}
  ];

$scope.filtered = [];
$scope.optionProp = '';

$scope.includeItem = function(item, prop) {
    $scope.optionProp = prop;
    var idx = $scope.filtered.indexOf(item);
    if (idx > -1) {
        $scope.filtered.splice(idx, 1);
    } else {
        $scope.filtered.push(item);
    }
}
$scope.filterFn = function(item) {
    if ($scope.filtered.length > 0) {// first time
            console.info( $scope.filtered.length > 0 );
        if ($scope.filtered.indexOf(item[$scope.optionProp]) < 0){
            console.warn( $scope.filtered.indexOf(item.username ) );
            return;
        }
    }
    return item;
  }
})
.filter("unique", function () {
  return function (data, propertyName) {
    if (angular.isArray(data) && angular.isString(propertyName)) {
        var results = [];
        var keys = {};
        for (var i = 0; i < data.length; i++) {
            var val = data[i][propertyName];
            if (angular.isUndefined(keys[val])) {
                keys[val] = true;
                results.push(val);
            }
        }
        return results;
    } else {
        return data;
    }
  }
});
<body ng-controller="Ctrl">
    <div  ng-repeat="user in users | unique:'username'">
        <input type="checkbox" ng-click="includeItem(user, 'username')" />   {{user}}    
    </div>
    <hr />
    <div  ng-repeat="s in users | unique:'status'">
        <input type="checkbox" ng-click="includeItem(s, 'status')"/> {{s}}    
    </div>
    <ul>
        <li ng-repeat="u in users | filter:filterFn">
            <p>{{u.username}}</p>
            <p>{{u.status}}</p>
        </li>
    </ul>
</body>

Answer 1

这是工作demo。我已将optionProp更改为数组以进行多项属性更改，并相应地修改了includeItem和filterFn。

<!DOCTYPE html>
<html ng-app="app">
  <head>
<style>
  li {outline: 2px solid gray; padding: 5px; list-style: none;}
</style>
        <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script>
'use strict'

angular.module('app', [])
.controller('Ctrl', function ($scope) {
    $scope.users = [
        {'username': 'julio', 'status': 'created'},
        {'username': 'julio', 'status': 'running'},
        {'username': 'phillip', 'status': 'running'},
        {'username': 'mats', 'status': 'created'}
    ];

    $scope.filtered = [];
    $scope.optionProp = [];

    $scope.includeItem = function(item, prop) {
        var idx = $scope.filtered.indexOf(item);
        if (idx > -1) {
            $scope.filtered.splice(idx, 1);
            var idy = $scope.optionProp.indexOf(prop);
            $scope.optionProp.splice(idy, 1);
        } else {
            $scope.filtered.push(item);
            $scope.optionProp.push(prop);
        }
    }

    $scope.filterFn = function(item) {
        if ($scope.filtered.length > 0) {// first time
                console.info( $scope.filtered.length > 0 );
            for (var i = 0; i < $scope.optionProp.length; i++) {
              if ($scope.filtered.indexOf(item[$scope.optionProp[i]]) < 0){
                  console.warn( $scope.filtered.indexOf(item.username ) );
                  return;
              }
            }
        }
        console.log( item );
         return item;
    }
})
.filter("unique", function () {
    return function (data, propertyName) {

        if (angular.isArray(data) && angular.isString(propertyName)) {
            var results = [];
            var keys = {};
            for (var i = 0; i < data.length; i++) {

                var val = data[i][propertyName];
                if (angular.isUndefined(keys[val])) {
                    keys[val] = true;
                    results.push(val);
                }
            }
            return results;
        } else {
            return data;
        }
    }
});


</script>
  </head>

<body ng-controller="Ctrl">
        <div  ng-repeat="user in users | unique:'username'">
            <input id="inputuser" type="checkbox" ng-model="input.chkUser" ng-click="includeItem(user, 'username')" /> {{user}}    
        </div>
        <hr />
        <div  ng-repeat="s in users | unique:'status'">
            <input id="inputstatus" type="checkbox" ng-model="input.chkStatus" ng-click="includeItem(s, 'status')"/> {{s}}    
        </div>
        <ul>
            <li ng-repeat="u in users | filter:filterFn">
                <p>{{u.username}}</p>
                <p>{{u.status}}</p>
            </li>
        </ul>

        Filter dump: {{filtered}}
</body>

</html>

角度按标准过滤数组中的多个项目

1 个答案: