お世話になります。
html
1<!-- test.html --> 2 3<h2 ng-repeat-start="t in test">{{t}}</h2> <!--見出し名--> 4<a></a> 5<input type="checkbox" id="test{{$index}}"/> 6<label for="test{{$index}}"></label> 7<span ng-repeat-end></span>
上記のようにng-repert-start,endを使用した場合、start~endまでの要素を繰り返し作成してくれると思います。
その繰り返しの中に更に要素を繰り返し作成することは可能でしょうか?
上記のHTMLだとinputとlabelとspanの要素をさらに不定数繰り返して作成したい場合どのようにすればよいでしょうか?
※inputとlabelとspanの作成する要素数は同じです。
疑問点等あれば聞いていただければと思います。
以下、要素が作成された後のイメージです。
html
1<h2 ng-repeat-start="t in test">{{t}}</h2> <!--見出し名--> 2<a></a> 3<input type="checkbox" id="test1"/> 4<label for="test1"></label> 5<span ng-repeat-end></span> 6 7<input type="checkbox" id="test2"/> 8<label for="test2"></label> 9<span ng-repeat-end></span> 10 11<input type="checkbox" id="test3"/> 12<label for="test3"></label> 13<span ng-repeat-end></span> 14 15<input type="checkbox" id="test4"/> 16<label for="test4"></label> 17<span ng-repeat-end></span>
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
>inputタグにIDを振りたいのですが、A○はtest1~test3の親グループの数、B○は子要素の数、といった風にIDを振りたいのですが可能でしょうか?
色々とやり方はあるかと思いますが、一例として提示します。
私はこんな感じでやるのがいいかなと思います。
今までに比べるとかなり複雑なことをしていますので、コードの意味が良く分からなければ遠慮なく質問して下さい。
HTML
1<!doctype html> 2<html ng-app="app"> 3<head> 4<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 5<script> 6 var app = "app" 7 var app = angular.module(app, []); 8 9 app.controller("testController", function(){ 10 11 this.items = []; 12 13 var contents = function(i,j){ 14 this.id = "A" + i + "B" + j 15 this.label = "label" + i + "-" + j 16 this.span = "span" + i + "-" + j 17 18 this.alertId = function(){ 19 alert(this.id); 20 } 21 } 22 23 this.items.push({contents:[] , value:"test1"}); 24 this.items.push({contents:[] , value:"test2"}); 25 this.items.push({contents:[] , value:"test3"}); 26 27 this.items[0].contents.push(new contents(1,1)); 28 this.items[0].contents.push(new contents(1,2)); 29 this.items[0].contents.push(new contents(1,3)); 30 31 this.items[1].contents.push(new contents(2,1)); 32 33 this.items[2].contents.push(new contents(3,1)); 34 this.items[2].contents.push(new contents(3,2)); 35 36 37 38 }); 39 40</script> 41 42<script type="text/javascript" src="./test.js"></script> 43 44</head> 45<body> 46 47 <div ng-controller="testController as tC"> 48 49 <h2 ng-repeat-start="item in tC.items">{{item.value}}</h2> <!--見出し名--> 50 <a></a> 51 52 <input id={{content.id}} ng-repeat-start="content in item.contents" type="checkbox" /> 53 54 <label>{{content.label}}</label> 55 <span>{{content.span}}</span> 56 <input type="button" value="alert" ng-click="content.alertId()"> 57 <br ng-repeat-end> 58 59 <span ng-repeat-end></span> 60 61 <div> 62 63 64</body> 65</html>
投稿2017/04/14 08:38
総合スコア1947
0
ベストアンサー
さきほどのコードに手を加えただけですが、やりたい結果はこんな感じでしょうかね?
HTML
1<!doctype html> 2<html ng-app="app"> 3<head> 4<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 5<script> 6 var app = "app" 7 var app = angular.module(app, []); 8 9 app.controller("testController", function(){ 10 11 this.items = []; 12 13 this.items.push({contents:[] , value:"test1"}); 14 this.items.push({contents:[] , value:"test2"}); 15 this.items.push({contents:[] , value:"test3"}); 16 17 this.items[0].contents.push({label:"label1", span:"span1"}); 18 this.items[0].contents.push({label:"label2", span:"span2"}); 19 this.items[0].contents.push({label:"label3", span:"span3"}); 20 21 this.items[1].contents.push({label:"label4", span:"span4"}); 22 23 this.items[2].contents.push({label:"label5", span:"span5"}); 24 this.items[2].contents.push({label:"label6", span:"span6"}); 25 26 }); 27 28</script> 29 30<script type="text/javascript" src="./test.js"></script> 31 32</head> 33<body> 34 35 <div ng-controller="testController as tC"> 36 37 <h2 ng-repeat-start="item in tC.items">{{item.value}}</h2> <!--見出し名--> 38 <a></a> 39 40 <input ng-repeat-start="content in item.contents" type="checkbox" /> 41 42 <label>{{content.label}}</label> 43 <span>{{content.span}}</span> 44 <br ng-repeat-end> 45 46 <span ng-repeat-end></span> 47 48 <div> 49 50 51</body> 52</html>
結果
投稿2017/04/14 06:33
総合スコア1947
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/14 07:33 編集
2017/04/14 07:42
2017/04/14 08:11 編集
2017/04/14 08:36
0
ng-repeat-startを繰り返し内で再度使えば動作します。
以下、動作例です。(結果はちょっと見づらいかもしれません・・・)
html単体で動作すると思います。
繰り返し処理に用いているオブジェクトは、概要として以下のようなつくりになっています。
1
├code:1,2,3
└value:test1
2
├code:4
└value:test2
2
├code:5,6
└value:test3
HTML
1<!doctype html> 2<html ng-app="app"> 3<head> 4<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 5<script> 6 var app = "app" 7 var app = angular.module(app, []); 8 9 app.controller("testController", function(){ 10 11 this.items = []; 12 13 this.items.push({codes:[] , value:"test1"}); 14 this.items.push({codes:[] , value:"test2"}); 15 this.items.push({codes:[] , value:"test3"}); 16 17 this.items[0].codes.push({value:1}); 18 this.items[0].codes.push({value:2}); 19 this.items[0].codes.push({value:3}); 20 21 this.items[1].codes.push({value:4}); 22 23 this.items[2].codes.push({value:5}); 24 this.items[2].codes.push({value:6}); 25 26 }); 27 28</script> 29 30<script type="text/javascript" src="./test.js"></script> 31 32</head> 33<body> 34 35 <div ng-controller="testController as tC"> 36 37 <h2 ng-repeat-start="item in tC.items"></h2> <!--見出し名--> 38 <a></a> 39 40 <input type="checkbox" /> 41 42 <label ng-repeat-start="code in item.codes">{{code.value}}</label> 43 <span ng-repeat-end>loop2!</span> 44 45 <label>{{item.value}}</label> 46 <span ng-repeat-end>loop1!</span> 47 48 <div> 49 50 51</body> 52</html>
投稿2017/04/14 04:22
編集2017/04/14 05:59総合スコア1947
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/14 05:59 編集
2017/04/14 06:00
2017/04/14 06:09
2017/04/14 06:19
2017/04/14 06:28
2017/04/14 06:33
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/14 08:54