角：获取清单，NG-重复使用分频器/分离器 [英] Angular: Getting list with ng-repeat with dividers / separators

问题描述

不过pretty新与棱角分明，只是找到我倒过来。

我使用的是NG-重复输出名称的alphabetised列表。我想这个名单充当标签中添加分隔。

例如：

  --------
一个
--------
作者1
作者2--------
乙
--------
笔者3
笔者4
等等
 

我的想法是通过字母来使用嵌套NG​​-重复循环，得到一个对象，作者与第二NG重复的特定字母。这是我到目前为止有：

 ＆LT;＆GT格数据-NG-重复=，在拼音字母
    ＆LT; D​​IV CLASS =项项除法＆GT;
        {{信}}
    ＆LT; / DIV＆GT;
    ＆LT; UL＆GT;
        ＆LT;李数据-NG-重复=扬声器GetSpeakers（字母）TYPE =项目文本换行的href =＃/音箱/ {{speaker.ID}}＆GT;
            {{speaker.title}}
        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

控制器code：

  .controller（'SpeakersCtrl'，函数（$范围，$ routeParams，StorageHandler）{    $ scope.GetSpeakers =功能（字母）{
        //获取作者列表的信
        的console.log（测试+字母）;
    };    $ 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​​-重复一个好方法，这
   问题，还是角度都内置了专门为这个目的是什么？ 有些来源还表示，使用NG重复函数是一个坏主意。但它确实工作，所以我很困惑，为什么我不应该用这个。


2. 当在控制台看，GetSpeakers得到在这个例子中调用了两次，我想不通为什么？


3. 我应该如何返回一个对象到GetSpeakers函数内的范围，而preventing超载$范围？

解决方案

可能更将数据映射到一个单一的对象，其中对象键的字母。我假设你有这样的对象：

  {ID：123姓：'弗兰克'，名字：Enstein'}
 

和希望的字母重新present姓氏

  VAR TMP = {};
对于（i = 0; I＆LT; authourArray.length;我++）{
    无功函= authourArray [I] .lastName.charAt（0）;
   如果（TMP [信] ==未定义）{
        TMP [信] = []
   }
     TMP [信] .push（authourArray [I]）;
}/ *可能要遍历所有的阵列现在和排序，除非从服务器已经排序* /$ scope.repeaterObject = TMP;
 

现在的标记将 NG-重复中的对象键所有的字母，而内环路，做一个 NG-重复作者阵列的那封信

 ＆LT; D​​IV数据-NG-重复=（信的作者）在repeaterObject＆GT;
    ＆LT; D​​IV CLASS =项项除法＆GT;
        {{信}}
    ＆LT; / DIV＆GT;
    ＆LT; UL＆GT;
        ＆LT;李NG重复=，在作者简介＆GT; {{author.firstName}} {{author.lastName}}＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

得到的对象将是这样的：

  {
   一个：[.....]，
   ......
   E：[{ID：123姓：'弗兰克'，名字：Enstein'} / *其他电子笔者对象* /]
   ......
}
 

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*/ ],
   ......
}

这篇关于角：获取清单，NG-重复使用分频器/分离器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！