Angular:使用带有分隔符/分隔符的 ng-repeat 获取列表 [英] Angular: Getting list with ng-repeat with dividers / separators

问题描述

Angular 仍然很新，只是找到了自己的方法.

我正在使用 ng-repeat 输出按字母顺序排列的姓名列表.我想在此列表中添加用作标签的分隔符.

示例:

--------一种--------作者 1作者 2--------乙--------作者 3作者 4等等

我的想法是使用嵌套的 ng-repeat 来遍历字母表，使用第二个 ng-repeat 为该特定字母的作者获取一个对象.这是我到目前为止所拥有的:

<div class="item item-divider">{{信}}
<ul><li data-ng-repeat="speaker in GetSpeakers(letter)" type="item-text-wrap" href="#/speaker/{{speaker.ID}}">{{speaker.title}}

控制器代码:

.controller('SpeakersCtrl', function($scope, $routeParams, StorageHandler) {$scope.GetSpeakers = 函数(字母){//获取这封信的作者列表console.log('test'+letter);};$scope.alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];})

小提琴:http://jsfiddle.net/t6Xq8/

我有几个问题.

1. 一般来说，使用嵌套的 ng-repeat 是一个很好的方法问题，还是 Angular 有专门为此目的而内置的?一些来源也说在 ng-repeat 中使用函数是个坏主意.但它确实有效，所以我很困惑为什么我不应该使用它.
2. 查看控制台时，在此示例中 GetSpeakers 被调用两次，我不知道为什么?
3. 我应该如何将对象返回到 GetSpeakers 函数中的作用域，同时防止 $scope 过载?

解决方案

可能更好的是将数据映射到单个对象，其中对象键是字母.我假设你有这样的对象:

{id:123, firstName:'Frank',lastName:'Enstein'}

并希望字母代表姓氏

var tmp={};for(i=0;i

现在在标记中将ng-repeat对象键中的所有字母，并在该循环中，为该字母执行authors数组的ng-repeat

<div class="item item-divider">{{信}}
<ul><li ng-repeat="author in author">{{author.firstName}} {{author.lastName}}</li>

结果对象将如下所示:

<代码>{一种:[.....]，......E:[ {id:123, firstName:'Frank',lastName :'Enstein'},/* 其他 E 作者对象*/],......}

Still pretty new with Angular, just finding my way around.

I'm using ng-repeat to output an alphabetised list of names. I'd like to add dividers within this list that act as labels.

Example:

--------
A
--------
Author 1
Author 2

--------
B
--------
Author 3
Author 4
etc

My thinking is to use nested ng-repeats to loop through the alphabet, getting an object with the authors for that specific letter with a second ng-repeat. Here's what I have so far:

<div data-ng-repeat="letter in alphabet">
    <div class="item item-divider">
        {{letter}}
    </div>
    <ul>
        <li data-ng-repeat="speaker in GetSpeakers(letter)" type="item-text-wrap" href="#/speaker/{{speaker.ID}}">
            {{speaker.title}}
        </li>
    </ul> 
</div>

Controller code:

.controller('SpeakersCtrl', function($scope, $routeParams, StorageHandler) {

    $scope.GetSpeakers = function(letter) {
        // Get list of authors for that letter
        console.log('test '+letter);
    };

    $scope.alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
})

Fiddle: http://jsfiddle.net/t6Xq8/

I have a couple of questions.

1. In general, is using a nested ng-repeat a good approach for this problem, or does Angular have built-in specifically for this purpose? Some sources also say using a function in ng-repeat is a bad idea. But it does work so I'm confused as to why I shouldn't use this.
2. When looking at the console, GetSpeakers gets called twice in this example and I can't figure out why?
3. How should I return an object to the scope within the GetSpeakers function, while preventing overloading the $scope?

解决方案

Likely better to map the data into a single object where the object keys are the letter. I'll assume you have objects like:

{id:123, firstName:'Frank',lastName :'Enstein'} 

and want the letter to represent last names

var tmp={};
for(i=0;i<authourArray.length;i++){
    var letter=authourArray[i].lastName.charAt(0);
   if( tmp[ letter] ==undefined){
        tmp[ letter]=[]
   }
     tmp[ letter].push( authourArray[i] );
}

/* likely want to loop over all the arrays now and sort unless already sorted from server*/

$scope.repeaterObject=tmp;

Now in markup will ng-repeat all the letters in the object keys, and within that loop, do an ng-repeat of the authors array for that letter

<div data-ng-repeat="(letter, authors) in repeaterObject">
    <div class="item item-divider">
        {{letter}}
    </div>
    <ul>
        <li ng-repeat="author in authors">{{author.firstName}} {{author.lastName}}</li>
    </ul>
</div>

Resulting object will look like:

{
   A:[.....],
   ......
   E:[ {id:123, firstName:'Frank',lastName :'Enstein'}, /* other E author objects*/ ],
   ......
}

这篇关于Angular:使用带有分隔符/分隔符的 ng-repeat 获取列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！