AngularJSでよく出てくる、ng-repeat について。このdirective は

<ul ng-repeat="instance in ctrl.friends ">
  <li>{{instance.name}} </li>
</ul>

など、Controller がもつ配列を画面に表示するのによく使います。

サンプル †

↑

ソース全体 †

↑

画面HTML †

   <table">
       <tr>
           <td>index</td>
           <td>id</td>
           <td>name</td>
           <td>age</td>
       </tr>
       <tr ng-repeat="instance in aboutCtrl.friends" >
           <td>{{$index}}</td>
           <td><display-value value='instance.id'/></td>
           <td><display-value value='instance.name'/></td>
           <td><display-value value='instance.age'/></td>
       </tr>
   </table>

こんな感じです。

<tr ng-repeat="instance in aboutCtrl.friends" >

上記のように ng-repeatが使われています。aboutCtrl が保持する friends 配列をぐるぐると table に表示していきます。

↑

aboutCtrl Controller †

適当に割愛してますが、だいたい下記のような感じです。

angular.module('ngRepeatSampleWeb')
    .controller('AboutCtrl', function () {
        var me = this;
        me.init = function () {
            me.friends = [
                {name: 'John 25', age: 25, gender: 'boy', id: 5},
                {name: 'Jessie 30', age: 30, gender: 'girl', id: 4},
                {name: 'Johanna 28', age: 28, gender: 'girl', id: 3},
                {name: 'Joy 15', age: 15, gender: 'girl', id: 2},
                {name: 'Mary 28', age: 28, gender: 'girl', id: 6},
                {name: 'Peter 95', age: 95, gender: 'boy', id: 7},
                {name: 'Sebastian 50', age: 50, gender: 'boy', id: 1},
                {name: 'Erika 27', age: 27, gender: 'girl', id: 8},
                {name: 'Patrick 40', age: 40, gender: 'boy', id: 10},
                {name: 'Samantha 60', age: 60, gender: 'girl', id: 9}
            ];
        };
        me.init();
    });

配列オブジェクトを作って、friends フィールドに配列をセットしています。

↑

Directive †

画面HTML上に、個々のデータを表示するDirective:

<display-value value='instance.age'/>

が使われていますが、中身は下記のような感じです。

angular.module('ngRepeatSampleWeb')
   .directive('displayValue', function () {
       return {
           restrict: 'E',
           template: '[{{$ctrl.value}}]',
           scope:{},
           bindToController: {
               value: "="
           },
           controller: function () {},
           controllerAs: "$ctrl"
       };
   });

もらったデータにカッコをつけて、表示しているだけですね。

↑

実行結果 †

実行してみましょう。コマンドは

npm install && bower install
grunt serve

などと叩けばOKだと思いますが、実行結果として

#ref(): Usage:([pagename/]attached-file-name[,parameters, ... ][,title])

と、Controllerがもつデータが表示されました。

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS