Javascript 按条件对数组中的多个项进行角度筛选_Javascript_Arrays_Angularjs_Object_Filter

Javascript 按条件对数组中的多个项进行角度筛选

javascript arrays angularjs object filter

Javascript 按条件对数组中的多个项进行角度筛选,javascript,arrays,angularjs,object,filter,Javascript,Arrays,Angularjs,Object,Filter,尝试创建一个过滤器，当单击某个名称时，该过滤器将显示该特定名称： {'username': 'julio', 'status': 'created'}, {'username': 'julio', 'status': 'running'}. 然后，如果单击某个条件，则仅显示具有该条件的一个对象： {'username': 'julio', 'status': 'created'} 请注意： angular.module（'app'，[]） .controller（'Ctrl'，函数（$s

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

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

然后，如果单击某个条件，则仅显示具有该条件的一个对象：

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

请注意：

angular.module（'app'，[]）
.controller（'Ctrl'，函数（$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=功能（项目、道具）{
$scope.optionProp=prop；
var idx=$scope.filtered.indexOf（项目）；
如果（idx>-1）{
$scope.filtered.splice（idx，1）；
}否则{
$scope.filtered.push（项目）；
}
}
$scope.filterFn=函数（项）{
如果（$scope.filtered.length>0）{//第一次
console.info（$scope.filtered.length>0）；
如果（$scope.filtered.indexOf（项[$scope.optionProp]）<0）{
console.warn（$scope.filtered.indexOf（item.username））；
返回；
}
}
退货项目；
}
})
.filter（“唯一”，函数（）{
返回函数（数据、属性名称）{
if（angular.isArray（数据）和&angular.isString（propertyName））{
var结果=[]；
var键={}；
对于（变量i=0；i
{{s}


{{u.username}
{{u.status}}

这里正在工作。我已将

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>


li{轮廓：2px纯灰色；填充：5px；列表样式：无；}
“严格使用”
角度.module（'app'，[]）
.controller（'Ctrl'，函数（$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=功能（项目、道具）{
var idx=$scope.filtered.indexOf（项目）；
如果（idx>-1）{
$scope.filtered.splice（idx，1）；
var idy=$scope.optionProp.indexOf（prop）；
$scope.optionProp.splice（idy，1）；
}否则{
$scope.filtered.push（项目）；
$scope.optionProp.push（道具）；
}
}
$scope.filterFn=函数（项）{
如果（$scope.filtered.length>0）{//第一次
console.info（$scope.filtered.length>0）；
对于（变量i=0；i<$scope.optionProp.length；i++）{
if（$scope.filtered.indexOf（项[$scope.optionProp[i]]）<0）{
console.warn（$scope.filtered.indexOf（item.username））；
返回；
}
}
}
控制台日志（项目）；
退货项目；
}
})
.filter（“唯一”，函数（）{
返回函数（数据、属性名称）{
if（angular.isArray（数据）和&angular.isString（propertyName））{
var结果=[]；
var键={}；
对于（变量i=0；i
{{s}


{{u.username}
{{u.status}}


筛选器转储：{{filtered}}

能否提供相关的代码片段？您的代码片段工作正常。你到底想要什么？请在问题中包含相关代码。当我第一次点击ex.julio时，问题应该是自包含的。是的，这很好，但是点击“创建”，我应该只看到：julio created。除了用户之外，我很高兴能帮助您

<!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>