角NG重复使用头部意见 [英] Angular ng-repeat with header views

问题描述

很新的角度这里这么裸露的我。我知道的基本使用 NG-重复，我可以很容易地生成一个列表。

Quite new to angular here so bare with me. I know the basic use of ng-repeat and I can generate a list easily.

<ul>
  <li ng-repeat="presentation in presentations">
    {{presentation.title}}
  </li>
</ul>

我有一个从PHP返回数组：

I have an array that is returned from PHP:

presentations = Array
(
    [0] => stdClass Object (
            [collection] => Collection A
            [title] => Title 1a
        )
    [1] => stdClass Object (
            [collection] => Collection A
            [title] => Title 2a
        )
    [2] => stdClass Object (
            [collection] => Collection B
            [title] => Title 1b
        )
    [3] => stdClass Object (
            [collection] => Collection B
            [title] => Title 2b
        )
    [4] => stdClass Object (
            [collection] => Collection C
            [title] => Title 1c
        )
    [5] => stdClass Object (
            [collection] => Collection C
            [title] => Title 2c
        )
    [6] => stdClass Object (
            [collection] => Collection C
            [title] => Title 3c
        )
)

您会发现，每个对象都有一个集。

You will notice that each object has a collection.

我需要创建基本上每个集合头视图。我需要它显示象下面这样：

I need to basically create a header view per collection. I need it to display like below:

COLLECTION A
    - Title 1a
    - Title 2a
COLLECTION B
    - Title 1b
    - Title 2b
COLLECTION C
    - Title 1c
    - Title 2c
    - Title 3c

只有标题是点击。这是可以做到只用 NG-重复？我知道我可以每个集合分类到PHP中单独的数组。我应该这样做第一？我想只使用 NG-重复如果可能的话，我只是不知道如何处理这一点。

Only the titles would be clickable. Is this possible to do with just ng-repeat? I know I can sort each collection into separate arrays in PHP. Should I do that first? I'd like to just use ng-repeat if possible, I am just not sure how to approach this.

我计划上显示此列表在导航列表作为使用Twitter的引导定义

I plan on displaying this list in a nav-list as defined using twitter bootstrap

推荐答案

有可能是其他的方式与指令来实现这一点，但

There are probably other way to achieve this with directives but

http://beta.plnkr.co/KjXZInfrDK9eRid2Rpqf

您定义，你会以来电显示或隐藏标题功能：

You define a function that you are going to call in order to show or hide the header:

// just a hard coded list of objects, we will output a header when the title changes
$scope.presentations = [{"title":"a", "other":"something else"},{"title":"a", "other":"something else"},{"title":"b", "other":"something else"},{"title":"b", "other":"something else"}, {"title":"b", "other":"something else"}]
$scope.currentTitle = '-1';
$scope.CreateHeader = function(title) {
      showHeader = (title!=$scope.currentTitle); 
       $scope.currentTitle = title;
      return showHeader;
}

您的HTML会是这个样子：

Your html would look something like this:

<ul>
    <li ng-repeat="presentation in presentations">
      <div ng-show="CreateHeader(presentation.title)">
        {{presentation.title}} is the header
      </div>
      {{presentation.other}} is an attribute on the collection item
   </li>
</ul>

这篇关于角NG重复使用头部意见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！