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がもつデータが表示されました。