php - 带标题 View 的 Angular ng-repeat

我知道ng-repeat的基本用法，并且可以轻松生成列表。

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

我有一个从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
        )
)

您会注意到每个对象都有一个collection。

我基本上需要为每个集合创建一个标题视图。我需要它显示如下：

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

只有标题是可单击的。仅使用ng-repeat可以做到这一点吗？我知道我可以将每个集合整理到PHP中的单独数组中。我应该先这样做吗？如果可能的话，我只想使用ng-repeat，我不确定该如何处理。

我计划在使用Twitter引导程序定义的nav-list中显示此列表。

最佳答案

可能还有其他方法可以通过指令来实现这一点，但是

http://beta.plnkr.co/KjXZInfrDK9eRid2Rpqf

您定义了一个要显示或隐藏标题的函数：

// 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看起来像这样：

<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>

关于php - 带标题 View 的 Angular ng-repeat，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15577791/