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

Question

如果属性相同，我试图使用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"}]  

因此，如果图书属于同一类型，那么我们将使用genre type作为手风琴的标题，并列出类型为该类型的图书的其余属性，但不重复标题。我遇到的问题是，由于json对象数组来自数据模型，如果不重复类型类型，我就无法真正过滤类型。

这是我想把标题作为Book的地方。在该手风琴组中，将包含以类型为标题的所有图书的列表。

http://plnkr.co/edit/PwIrOAIT3RRaE2ijzGZb?p =预览

Answer 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" }];

Answer 2

这是因为你在generes中有重复的值使用track by

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

或者如果你想按类型对你的模型进行分组你可以使用下划线。js请参阅小提琴

视图:

<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');
}

Answer 3

所以我找到了一个适合我的解决方案。我在嵌套的ng-repeat中使用了这个AngularJs过滤器。我对我的数据模型做了一些改变，但这是相同的想法。