Javascript AngularJS过滤器：将具有唯一ID的对象过滤为单独的对象_Javascript_Html_Angularjs

Javascript AngularJS过滤器：将具有唯一ID的对象过滤为单独的对象

javascript html angularjs

Javascript AngularJS过滤器：将具有唯一ID的对象过滤为单独的对象,javascript,html,angularjs,Javascript,Html,Angularjs,我正在开发angular应用程序，在那里我有键和值的数据对象，见下文 var data=[{key:"home",value:"hk1"},{key:"home",value:"hk2"},{key:"home",value:"hk3"},{key:"home",value:"hk4"}, {key:"product",value:"pk1"},{key:"product",value:"pk2"},{key:"product",value

我正在开发angular应用程序，在那里我有键和值的数据对象，见下文

var data=[{key:"home",value:"hk1"},{key:"home",value:"hk2"},{key:"home",value:"hk3"},{key:"home",value:"hk4"},
                            {key:"product",value:"pk1"},{key:"product",value:"pk2"},{key:"product",value:"pk3"},{key:"product",value:"pk4"},
                            {key:"service",value:"sk1"},{key:"service",value:"sk2"},{key:"service",value:"sk3"},{key:"service",value:"sk4"},
                            ];

我的页面是

<html lang="en" ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>Angular Boiler Plate</title>
        <script src="/angular.js"></script>
        <script>
        var app=angular.module('myApp',[]);
        function mainCtrl($scope){
            $scope.Maindata=[{key:"home",value:"hk1"},{key:"home",value:"hk2"},{key:"home",value:"hk3"},{key:"home",value:"hk4"},
                            {key:"product",value:"pk1"},{key:"product",value:"hk2"},{key:"product",value:"hk3"},{key:"product",value:"hk4"},
                            {key:"service",value:"sk1"},{key:"service",value:"hk2"},{key:"service",value:"hk3"},{key:"service",value:"hk4"},
                            ];


        }
        </script>
    </head>

    <body ng-controller="mainCtrl">

        <h2 ng-repeat="data in Maindata" class="">
            {{data.key}}
            <div ng-repeat="">{{data.value}}</div>
        </h2>


    </body>
</html>

所以我可以在一个页面中一次性使用“home”、“service”和“product”作为标题，并使用ng repeat将每个标题中的值迭代到列表中

这里我将使用两个

ng repeat

一个用于标题，即home、service和product。另一个用于迭代每个标题中的数据

请使用筛选器帮助我实现此目标。提前感谢您的帮助。

我目前无法使用Plunker进行演示（GitHub signin问题）

编辑：我为现场演示创建了一个JSBIN：

编辑：使用过滤器并指定要列为keyToDisplay的键

 $scope.keyToDisplay = 'home';

html

<h2 ng-repeat="data in Maindata | filter:{'key':keyToDisplay}" >
    {{data.key}}
    <div ng-repeat="">{{data.value}}</div>
</h2>

FilteredData应如下所示：

{
    "home": [
        {key:"home",value:"hk1"},
        {key:"home",value:"hk2"},
        {key:"home",value:"hk3"},
        {key:"home",value:"hk4"}
    ],
    "product": [
        {key:"product",value:"pk1"},
        {key:"product",value:"hk2"},
        {key:"product",value:"hk3"},
        {key:"product",value:"hk4"}
    ],
    "service": [
        {key:"service",value:"sk1"},
        {key:"service",value:"hk2"},
        {key:"service",value:"hk3"},
        {key:"service",value:"hk4"},
    ]
};

然后你可以做：

<h2 ng-repeat="data in filteredData.home">
    {{data.key}}
    <div ng-repeat="">{{data.value}}</div>
</h2>


{{data.key}
{{data.value}}

仅显示主值。

我目前无法使用Plunker进行演示（GitHub登录问题）

编辑：我为现场演示创建了一个JSBIN：

编辑：使用过滤器并指定要列为keyToDisplay的键

 $scope.keyToDisplay = 'home';

html

<h2 ng-repeat="data in Maindata | filter:{'key':keyToDisplay}" >
    {{data.key}}
    <div ng-repeat="">{{data.value}}</div>
</h2>

FilteredData应如下所示：

{
    "home": [
        {key:"home",value:"hk1"},
        {key:"home",value:"hk2"},
        {key:"home",value:"hk3"},
        {key:"home",value:"hk4"}
    ],
    "product": [
        {key:"product",value:"pk1"},
        {key:"product",value:"hk2"},
        {key:"product",value:"hk3"},
        {key:"product",value:"hk4"}
    ],
    "service": [
        {key:"service",value:"sk1"},
        {key:"service",value:"hk2"},
        {key:"service",value:"hk3"},
        {key:"service",value:"hk4"},
    ]
};

然后你可以做：

<h2 ng-repeat="data in filteredData.home">
    {{data.key}}
    <div ng-repeat="">{{data.value}}</div>
</h2>


{{data.key}
{{data.value}}

仅显示主值。

我目前无法使用Plunker进行演示（GitHub登录问题）

编辑：我为现场演示创建了一个JSBIN：

编辑：使用过滤器并指定要列为keyToDisplay的键

 $scope.keyToDisplay = 'home';

html

<h2 ng-repeat="data in Maindata | filter:{'key':keyToDisplay}" >
    {{data.key}}
    <div ng-repeat="">{{data.value}}</div>
</h2>

FilteredData应如下所示：

{
    "home": [
        {key:"home",value:"hk1"},
        {key:"home",value:"hk2"},
        {key:"home",value:"hk3"},
        {key:"home",value:"hk4"}
    ],
    "product": [
        {key:"product",value:"pk1"},
        {key:"product",value:"hk2"},
        {key:"product",value:"hk3"},
        {key:"product",value:"hk4"}
    ],
    "service": [
        {key:"service",value:"sk1"},
        {key:"service",value:"hk2"},
        {key:"service",value:"hk3"},
        {key:"service",value:"hk4"},
    ]
};

然后你可以做：

<h2 ng-repeat="data in filteredData.home">
    {{data.key}}
    <div ng-repeat="">{{data.value}}</div>
</h2>


{{data.key}
{{data.value}}

仅显示主值。

我目前无法使用Plunker进行演示（GitHub登录问题）

编辑：我为现场演示创建了一个JSBIN：

编辑：使用过滤器并指定要列为keyToDisplay的键

 $scope.keyToDisplay = 'home';

html

<h2 ng-repeat="data in Maindata | filter:{'key':keyToDisplay}" >
    {{data.key}}
    <div ng-repeat="">{{data.value}}</div>
</h2>

FilteredData应如下所示：

{
    "home": [
        {key:"home",value:"hk1"},
        {key:"home",value:"hk2"},
        {key:"home",value:"hk3"},
        {key:"home",value:"hk4"}
    ],
    "product": [
        {key:"product",value:"pk1"},
        {key:"product",value:"hk2"},
        {key:"product",value:"hk3"},
        {key:"product",value:"hk4"}
    ],
    "service": [
        {key:"service",value:"sk1"},
        {key:"service",value:"hk2"},
        {key:"service",value:"hk3"},
        {key:"service",value:"hk4"},
    ]
};

然后你可以做：

<h2 ng-repeat="data in filteredData.home">
    {{data.key}}
    <div ng-repeat="">{{data.value}}</div>
</h2>


{{data.key}
{{data.value}}

仅显示主值。

我没有对此进行测试，但原则上它应该是这样工作的

var filteredData = Array();

// helper function to check whether a key
// has already been added to the filteredData 
// array. If yes, return the index. -1 if no
function keyIndex(key, filteredData) {
    for(var i=0; i < filteredData.length; i++) {
        if (key in filteredData[i]) {
            return i;
        }   
    };       
    return -1; 
}

// loop through main data and cosntruct the filtered one
$.each($scope.Maindata, function() {
    var index = keyIndex(this.key, filteredData);
    if (index > 0) {
        filteredData[index][this.key].push({"value" : this.value});
    } else {
        filteredData.push({this.key : [{"value" : this.value}]});
    }   
});

var filteredData=Array（）；
//helper函数，用于检查键
//已添加到筛选器数据中
//数组。如果是，则返回索引。如果否，则返回-1
函数键索引（键，过滤器数据）{
对于（变量i=0；i0）{
filteredData[index][this.key].push（{“value”：this.value}）；
}否则{
push（{this.key:[{“value”：this.value}]}）；
}   
});

我没有测试它，但原则上它应该是这样工作的

var filteredData = Array();

// helper function to check whether a key
// has already been added to the filteredData 
// array. If yes, return the index. -1 if no
function keyIndex(key, filteredData) {
    for(var i=0; i < filteredData.length; i++) {
        if (key in filteredData[i]) {
            return i;
        }   
    };       
    return -1; 
}

// loop through main data and cosntruct the filtered one
$.each($scope.Maindata, function() {
    var index = keyIndex(this.key, filteredData);
    if (index > 0) {
        filteredData[index][this.key].push({"value" : this.value});
    } else {
        filteredData.push({this.key : [{"value" : this.value}]});
    }   
});

var filteredData=Array（）；
//helper函数，用于检查键
//已添加到筛选器数据中
//数组。如果是，则返回索引。如果否，则返回-1
函数键索引（键，过滤器数据）{
对于（变量i=0；i0）{
filteredData[index][this.key].push（{“value”：this.value}）；
}否则{
push（{this.key:[{“value”：this.value}]}）；
}   
});

我没有测试它，但原则上它应该是这样工作的

var filteredData = Array();

// helper function to check whether a key
// has already been added to the filteredData 
// array. If yes, return the index. -1 if no
function keyIndex(key, filteredData) {
    for(var i=0; i < filteredData.length; i++) {
        if (key in filteredData[i]) {
            return i;
        }   
    };       
    return -1; 
}

// loop through main data and cosntruct the filtered one
$.each($scope.Maindata, function() {
    var index = keyIndex(this.key, filteredData);
    if (index > 0) {
        filteredData[index][this.key].push({"value" : this.value});
    } else {
        filteredData.push({this.key : [{"value" : this.value}]});
    }   
});

var filteredData=Array（）；
//helper函数，用于检查键
//已添加到筛选器数据中
//数组。如果是，则返回索引。如果否，则返回-1
函数键索引（键，过滤器数据）{
对于（变量i=0；i0）{
filteredData[index][this.key].push（{“value”：this.value}）；
}否则{
push（{this.key:[{“value”：this.value}]}）；
}   
});

我没有测试它，但原则上它应该是这样工作的

var filteredData = Array();

// helper function to check whether a key
// has already been added to the filteredData 
// array. If yes, return the index. -1 if no
function keyIndex(key, filteredData) {
    for(var i=0; i < filteredData.length; i++) {
        if (key in filteredData[i]) {
            return i;
        }   
    };       
    return -1; 
}

// loop through main data and cosntruct the filtered one
$.each($scope.Maindata, function() {
    var index = keyIndex(this.key, filteredData);
    if (index > 0) {
        filteredData[index][this.key].push({"value" : this.value});
    } else {
        filteredData.push({this.key : [{"value" : this.value}]});
    }   
});

var filteredData=Array（）；
//helper函数，用于检查键
//已添加到筛选器数据中
//数组。如果是，则返回索引。如果否，则返回-1
函数键索引（键，过滤器数据）{
对于（变量i=0；i0）{
filteredData[index][this.key].push（{“value”：this.value}）；
}否则{
push（{this.key:[{“value”：this.value}]}）；
}   
});

谢谢您的帮助。loadash是angular中的框架还是插件？它是一个单独的库帮助程序，用于处理对象、数组和集合！您只需像angular一样使用脚本标记添加它。您可以在此处下载它：无法读取lodash站点中的内容，因为它在我的浏览器中显示了一些问题。我创建了一个JSBIN，演示如何通过各种方式实现这一点！当然，ng选项就像一个特殊的ng重复，只针对select元素。因此，对于

ng options=“key as key.key for key