AngularJS/TIPS集/ng-repeatについて
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
#topicpath
----
AngularJSでよく出てくる、ng-repeat について。このdirectiv...
<ul>
<li ng-repeat="instance in ctrl.friends ">{{instance.n...
</ul>
など、Controller がもつ配列を画面に表示するのによく使いま...
#contents
** やってみる [#q97d141e]
*** ソース全体 [#z45f905e]
https://github.com/masatomix/ng-repeat-sample-web/release...
からダウンロード可能です。
*** 画面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 が保持...
*** aboutCtrl Controller [#tda3a4c0]
適当に割愛してますが、だいたい下記のような感じです。
angular.module('ngRepeatSampleWeb')
.controller('AboutCtrl', function () {
var me = this;
me.init = function () {
me.friends = [
{name: 'John 25', age: 25, gender: 'boy'...
{name: 'Jessie 30', age: 30, gender: 'gi...
{name: 'Johanna 28', age: 28, gender: 'g...
{name: 'Joy 15', age: 15, gender: 'girl'...
{name: 'Mary 28', age: 28, gender: 'girl...
{name: 'Peter 95', age: 95, gender: 'boy...
{name: 'Sebastian 50', age: 50, gender: ...
{name: 'Erika 27', age: 27, gender: 'gir...
{name: 'Patrick 40', age: 40, gender: 'b...
{name: 'Samantha 60', age: 60, gender: '...
];
};
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(init.png)
と、Controllerがもつデータが表示されました。
** 表示データを入れ替えてみる。 [#s2a02683]
さてソース全体を見ると分かりますが、テーブル上部にはボタ...
<div>
<button ng-click="aboutCtrl.search()">search</button>
<button ng-click="aboutCtrl.init()">init</button>
</div>
とControllerのメソッドを呼び出すようになっています。Contr...
// 初期化
me.init = function () {
me.friends = [
{name: 'John 25', age: 25, gender: 'boy', id: 5},
{name: 'Jessie 30', age: 30, gender: 'girl', id...
{name: 'Johanna 28', age: 28, gender: 'girl', i...
{name: 'Joy 15', age: 15, gender: 'girl', id: 2},
{name: 'Mary 28', age: 28, gender: 'girl', id: ...
{name: 'Peter 95', age: 95, gender: 'boy', id: ...
{name: 'Sebastian 50', age: 50, gender: 'boy', ...
{name: 'Erika 27', age: 27, gender: 'girl', id:...
{name: 'Patrick 40', age: 40, gender: 'boy', id...
{name: 'Samantha 60', age: 60, gender: 'girl', ...
];
};
こちらは画面表示時にもよばれていました。friendsフィールド...
// 中身入れ替え。
me.search = function () {
me.friends = [
{name: 'Peter 95', age: 95, gender: 'boy', id: 7},
{name: 'Erika 27', age: 27, gender: 'girl', id: 8}
];
};
こちらも、friends フィールドの配列オブジェクトを入れ替え...
画面上のボタンを実行してみると、searchやinitをボタンを押...
#ref(ani01.gif)
***アニメーションがヘン [#oc0f4047]
さてココからが本題です。このフェードアウトするアニメーシ...
また、2行の状態でinitを押すと、2行プラス初期状態(結果一瞬...
想定としては、初期状態からsearchを押すと、該当行だけが残...
*** ng-repeatのオブジェクトの管理方法について。 [#hc328118]
実は AngularJS は ng-repeat で画面上に 配列を展開する際、...
そのIDは未指定時では、オブジェクトのハッシュ値(($id(insta...
そのIDですが、今回のように表示に使っている配列やコレクシ...
- 追加されたオブジェクトのIDと、元配列上のオブジェクトた...
- 追加されたオブジェクトのIDが、元配列上になかった場合は...
- 新しい配列上に存在しないオブジェクトは、画面上から削除...
といった動きをするようですね。要するに行をIDで管理してて...
さっきのアニメーションがヘンという話は init/searchメソッ...
実際、おなじオブジェクトを使うように、下記のように変えて...
var v7 ={name: 'Peter 95', age: 95, gender: 'boy', id: 7};
var v8 = {name: 'Erika 27', age: 27, gender: 'girl', id:...
me.init = function () {
me.friends = [
{name: 'John 25', age: 25, gender: 'boy', id: 5},
{name: 'Jessie 30', age: 30, gender: 'girl', id:...
{name: 'Johanna 28', age: 28, gender: 'girl', id...
{name: 'Joy 15', age: 15, gender: 'girl', id: 2},
{name: 'Mary 28', age: 28, gender: 'girl', id: 6},
v7,
{name: 'Sebastian 50', age: 50, gender: 'boy', i...
v8,
{name: 'Patrick 40', age: 40, gender: 'boy', id:...
{name: 'Samantha 60', age: 60, gender: 'girl', i...
];
};
// 中身入れ替え。
me.search = function () {
me.friends = [
v7, // おなじオブジェクト
v8 // おなじオブジェクト
];
};
該当行だけが残されたまま、残りがフェードアウトしていく想...
#ref(ani02.gif)
*** track by xx のはなし [#d414228f]
さてこのオブジェクトのハッシュ値を用いてDOMをトラッキング...
しかし、たとえばRESTの戻り値で画面を更新かける場合など「...
修正前:<tr ng-repeat="instance in aboutCtrl.friends" >
修正後:<tr ng-repeat="instance in aboutCtrl.friends tra...
これで「(更新をかけにいく行を指定するために) 元データを追...
上記の例では、ハッシュ値が異なっていてもidプロパティが等...
たとえばRESTの結果を画面に表示しているケースで、戻り電文...
*** トラッキング指定に関数を指定する [#nc286827]
track by xx のxx部には関数を指定することもできます。
Controllerに定義している下記の関数があったとして、
// trackするモノを決めるメソッド
me.myTrack = function (hash,value,index) {
console.log(hash);
console.log(value);
console.log(index);
return value.id;
};
<tr class="row animate-repeat"
ng-repeat="instance in aboutCtrl.friends track by about...
なんて指定することが可能です。オブジェクトのプロパティに...
ちなみに$id(instance)は引数のオブジェクトのハッシュ値を求...
*** 蛇足。track by $indexで重複回避の件 [#l01797e1]
ng-repeat がオブジェクトにIDを振ってDOMをトラッキングする...
<div ng-repeat="value in [4, 4]"></div>
これだとオブジェクトが重複してエラーが出るので、
<div ng-repeat="value in [4, 4] track by $index"></div>
ってやりましょう、って言う話。「ng-repeat は重複をゆるさ...
正しいっちゃそうなんですが、$index でトラッキングすると、...
#ref(ani03.gif)
↑なんか味気ない感じ。
** 関連リンク [#h2545de3]
- [[AngularJSのngRepeatを"ちゃんと"理解する. - Qiita>http...
- [[AngularJS: API: ngRepeat>https://docs.angularjs.org/a...
- [[ngRepeat | AngularJS 1.2 日本語リファレンス | js STUD...
- [[$watchと$watchの中間的な位置付けの$watchCollection - ...
----
この記事は
#vote(おもしろかった[3],そうでもない[2])
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
終了行:
#topicpath
----
AngularJSでよく出てくる、ng-repeat について。このdirectiv...
<ul>
<li ng-repeat="instance in ctrl.friends ">{{instance.n...
</ul>
など、Controller がもつ配列を画面に表示するのによく使いま...
#contents
** やってみる [#q97d141e]
*** ソース全体 [#z45f905e]
https://github.com/masatomix/ng-repeat-sample-web/release...
からダウンロード可能です。
*** 画面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 が保持...
*** aboutCtrl Controller [#tda3a4c0]
適当に割愛してますが、だいたい下記のような感じです。
angular.module('ngRepeatSampleWeb')
.controller('AboutCtrl', function () {
var me = this;
me.init = function () {
me.friends = [
{name: 'John 25', age: 25, gender: 'boy'...
{name: 'Jessie 30', age: 30, gender: 'gi...
{name: 'Johanna 28', age: 28, gender: 'g...
{name: 'Joy 15', age: 15, gender: 'girl'...
{name: 'Mary 28', age: 28, gender: 'girl...
{name: 'Peter 95', age: 95, gender: 'boy...
{name: 'Sebastian 50', age: 50, gender: ...
{name: 'Erika 27', age: 27, gender: 'gir...
{name: 'Patrick 40', age: 40, gender: 'b...
{name: 'Samantha 60', age: 60, gender: '...
];
};
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(init.png)
と、Controllerがもつデータが表示されました。
** 表示データを入れ替えてみる。 [#s2a02683]
さてソース全体を見ると分かりますが、テーブル上部にはボタ...
<div>
<button ng-click="aboutCtrl.search()">search</button>
<button ng-click="aboutCtrl.init()">init</button>
</div>
とControllerのメソッドを呼び出すようになっています。Contr...
// 初期化
me.init = function () {
me.friends = [
{name: 'John 25', age: 25, gender: 'boy', id: 5},
{name: 'Jessie 30', age: 30, gender: 'girl', id...
{name: 'Johanna 28', age: 28, gender: 'girl', i...
{name: 'Joy 15', age: 15, gender: 'girl', id: 2},
{name: 'Mary 28', age: 28, gender: 'girl', id: ...
{name: 'Peter 95', age: 95, gender: 'boy', id: ...
{name: 'Sebastian 50', age: 50, gender: 'boy', ...
{name: 'Erika 27', age: 27, gender: 'girl', id:...
{name: 'Patrick 40', age: 40, gender: 'boy', id...
{name: 'Samantha 60', age: 60, gender: 'girl', ...
];
};
こちらは画面表示時にもよばれていました。friendsフィールド...
// 中身入れ替え。
me.search = function () {
me.friends = [
{name: 'Peter 95', age: 95, gender: 'boy', id: 7},
{name: 'Erika 27', age: 27, gender: 'girl', id: 8}
];
};
こちらも、friends フィールドの配列オブジェクトを入れ替え...
画面上のボタンを実行してみると、searchやinitをボタンを押...
#ref(ani01.gif)
***アニメーションがヘン [#oc0f4047]
さてココからが本題です。このフェードアウトするアニメーシ...
また、2行の状態でinitを押すと、2行プラス初期状態(結果一瞬...
想定としては、初期状態からsearchを押すと、該当行だけが残...
*** ng-repeatのオブジェクトの管理方法について。 [#hc328118]
実は AngularJS は ng-repeat で画面上に 配列を展開する際、...
そのIDは未指定時では、オブジェクトのハッシュ値(($id(insta...
そのIDですが、今回のように表示に使っている配列やコレクシ...
- 追加されたオブジェクトのIDと、元配列上のオブジェクトた...
- 追加されたオブジェクトのIDが、元配列上になかった場合は...
- 新しい配列上に存在しないオブジェクトは、画面上から削除...
といった動きをするようですね。要するに行をIDで管理してて...
さっきのアニメーションがヘンという話は init/searchメソッ...
実際、おなじオブジェクトを使うように、下記のように変えて...
var v7 ={name: 'Peter 95', age: 95, gender: 'boy', id: 7};
var v8 = {name: 'Erika 27', age: 27, gender: 'girl', id:...
me.init = function () {
me.friends = [
{name: 'John 25', age: 25, gender: 'boy', id: 5},
{name: 'Jessie 30', age: 30, gender: 'girl', id:...
{name: 'Johanna 28', age: 28, gender: 'girl', id...
{name: 'Joy 15', age: 15, gender: 'girl', id: 2},
{name: 'Mary 28', age: 28, gender: 'girl', id: 6},
v7,
{name: 'Sebastian 50', age: 50, gender: 'boy', i...
v8,
{name: 'Patrick 40', age: 40, gender: 'boy', id:...
{name: 'Samantha 60', age: 60, gender: 'girl', i...
];
};
// 中身入れ替え。
me.search = function () {
me.friends = [
v7, // おなじオブジェクト
v8 // おなじオブジェクト
];
};
該当行だけが残されたまま、残りがフェードアウトしていく想...
#ref(ani02.gif)
*** track by xx のはなし [#d414228f]
さてこのオブジェクトのハッシュ値を用いてDOMをトラッキング...
しかし、たとえばRESTの戻り値で画面を更新かける場合など「...
修正前:<tr ng-repeat="instance in aboutCtrl.friends" >
修正後:<tr ng-repeat="instance in aboutCtrl.friends tra...
これで「(更新をかけにいく行を指定するために) 元データを追...
上記の例では、ハッシュ値が異なっていてもidプロパティが等...
たとえばRESTの結果を画面に表示しているケースで、戻り電文...
*** トラッキング指定に関数を指定する [#nc286827]
track by xx のxx部には関数を指定することもできます。
Controllerに定義している下記の関数があったとして、
// trackするモノを決めるメソッド
me.myTrack = function (hash,value,index) {
console.log(hash);
console.log(value);
console.log(index);
return value.id;
};
<tr class="row animate-repeat"
ng-repeat="instance in aboutCtrl.friends track by about...
なんて指定することが可能です。オブジェクトのプロパティに...
ちなみに$id(instance)は引数のオブジェクトのハッシュ値を求...
*** 蛇足。track by $indexで重複回避の件 [#l01797e1]
ng-repeat がオブジェクトにIDを振ってDOMをトラッキングする...
<div ng-repeat="value in [4, 4]"></div>
これだとオブジェクトが重複してエラーが出るので、
<div ng-repeat="value in [4, 4] track by $index"></div>
ってやりましょう、って言う話。「ng-repeat は重複をゆるさ...
正しいっちゃそうなんですが、$index でトラッキングすると、...
#ref(ani03.gif)
↑なんか味気ない感じ。
** 関連リンク [#h2545de3]
- [[AngularJSのngRepeatを"ちゃんと"理解する. - Qiita>http...
- [[AngularJS: API: ngRepeat>https://docs.angularjs.org/a...
- [[ngRepeat | AngularJS 1.2 日本語リファレンス | js STUD...
- [[$watchと$watchの中間的な位置付けの$watchCollection - ...
----
この記事は
#vote(おもしろかった[3],そうでもない[2])
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
ページ名: