AngularJSでよく出てくる、ng-repeat について。このdirective は
 <ul ng-repeat="instance in ctrl.friends ">
   <li>{{instance.name}} </li>
 </ul>
など、Controller がもつ配列を画面に表示するのによく使います。

** サンプル [#q97d141e]

*** ソース全体 [#z45f905e]

*** 画面HTML [#l4814d5d]
    <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 [#tda3a4c0]
適当に割愛してますが、だいたい下記のような感じです。

 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 [#da863815]
画面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"
        };
    });
もらったデータにカッコをつけて、表示しているだけですね。


***実行結果 [#g736696f]
実行してみましょう。コマンドは
 npm install && bower install
 grunt serve
などと叩けばOKだと思いますが、実行結果として

#ref()

と、Controllerがもつデータが表示されました。
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS