1

の基本的な使い方を知っていて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可能であれば使用したいのですが、これにアプローチする方法がわかりません。

nav-listこのリストは、 twitter ブートストラップを使用して定義されたとおりに表示する予定です。

ナビリスト

4

1 に答える 1

2

おそらくディレクティブでこれを達成する他の方法がありますが、

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>
于 2013-03-22T18:56:18.823 に答える