AngularJS ng-repeat问题,删除对象中的重复键

时间:2014-06-09 14:01:27

标签: javascript angularjs angularjs-ng-repeat angular-ui

如果属性相同,我正在尝试使用ng-repeat重复其余数据。这可能听起来不太清楚,所以这里有一个例子。

JSON示例,这是一个图书数组

[{"Genre":Sci-fic,"Name":"Bookname1"},
 {"Genre":Sci-fic,"Name":"Bookname2"},
 {"Genre":Non sci-fic,"Name":"Bookname3"},    
 {"Genre":Non sci-fic,"Name":"Bookname4"}]  

因此,如果该书属于同一类型,那么我们将类型类型作为手风琴的标题,并列出其类型的其余属性而不重复标题。我遇到的问题是,由于json对象数组来自数据模型,我无法在不重复类型类型的情况下真正过滤类型。

这里是我正在尝试以书籍为标题的地方.Genre和手风琴组内部将列出所有类型为标题的书籍。

http://plnkr.co/edit/PwIrOAIT3RRaE2ijzGZb?p=preview

3 个答案:

答案 0 :(得分:1)

我还没有能够解决这个问题......我能想到的最好的解决方案是在将该模型添加到您的范围之前简单地删除重复项...

使用你的jsFiddle示例......

<强> http://jsfiddle.net/mcpDESIGNS/Uz5tM/1/

var books = [
             {"Genre":"Sci-fic", "Name":"Bookname1"},
             {"Genre":"Sci-fic", "Name":"Bookname2"},
             {"Genre":"Non sci-fic", "Name":"Bookname3"},    
             {"Genre":"Non sci-fic", "Name":"Bookname4"}
               ];

var unique = [],
    blocked = [];

unique.push(books[0]);
blocked.push(books[0].Genre);

for (var i = 1; i < books.length; i++) {
    if (blocked.indexOf(books[i].Genre) <= -1) {
        unique.push(books[i]);
        blocked.push(books[i].Genre);
    }
}

$scope.Books = books; 
// [{Genre: "Sci-fic", Name: "Bookname1"}, 
//  { Genre: "Non sci-fic", Name: "Bookname3" }];

答案 1 :(得分:0)

之所以发生这种情况,是因为您在使用跟踪的基础上获得了重复值

  <div ng-repeat="genere in generes track by $index"></div>

或者如果您想要按流派建模的群组,可以使用underscore.js,请参阅fiddle

查看:

<div ng-app="app">

    <div ng-controller="ParentCtrl">

    <ul class="about-tab-titles" close-others="oneAtATime">
            <li  ng-repeat="(key ,book) in model">
                {{key}}

                <ul>
                    <li ng-repeat="b in book ">{{b.Name}}</li>
                </ul>
            </li>
        </ul> 
    </div>
</div>

JS:

angular.module('app', [])

function ParentCtrl($scope) {
    var books = [{
        "Genre": "Sci-fic",
            "Name": "Bookname1"
    }, {
        "Genre": "Sci-fic",
            "Name": "Bookname2"
    }, {
        "Genre": "Non sci-fic",
            "Name": "Bookname3"
    }, {
        "Genre": "Non sci-fic",
            "Name": "Bookname4"
    }];

    $scope.model = _.groupBy(books, 'Genre');

}

答案 2 :(得分:0)

所以我找到了一个适合我的解决方案。我跟着这个AngularJs filter on nested ng-repeat。我对我的数据模型进行了一些更改,但它的想法相同。