Q&A
とても実現したいものに近づきました。
ですが、CSSの方でspanに装飾を粉っている影響もあって最後の<span ng-repeat-end></span>がどうしても邪魔になってきてしまいます．．．
加えて、brタグを使うと改行されるのですが、改行なしでできないでしょうか？
上記2つのタグを別のものに変えることはできないでしょうか？
お世話になります。
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>
akabeeさんへの追記
回答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
２つのタグは別のものにもできますよ。brタグはそのほうが見やすくかつ求めているものに近いかと思いbrタグを入れてみたのですが、特にbrである必要はありません。そのへんは自由に変えて頂ければと思います。
また、課題の本質がまだ見えていませんので、私で変えるにしても、どのように変えれば実現したいものとなるのかが分かりません。なぜ、spanが邪魔ということになるのか。そのへんが課題の本質に関わってくるかと思うのですが。。。
もし、「この回答の結果のような表示を得ること」が目的なのではなく、「要素が作成された後のイメージのタグ構成を実現すること」が目的なのであれば、難しいかと思います。ループ用の要素というものが必要になってくるためです。その「ループ用の要素」のことを邪魔と言っておられるのかなと想像しています。この例ではh2-spanのペアとinput-brのペアがループ用の要素です。
もしその結果とCSSの設定が思い通りに合致しないのであれば、ng-repeatで出来上がる結果に合わせてCSSの設定を変更するほうが、どちらかというと現実的かなと思います。
下図のような構成が普通です。提示の図と比べると、【ループ用の要素１end】というのが増えていますが、これがcoko1さんにとっては邪魔と言っておられるということで認識は合っていますか？
<h2 【ループ用の要素１start】>見出し１</h2>
<a>
｜＿<input 【ループ用の要素２start】>
｜＿<label>
｜＿<span 【ループ用の要素２end】>
｜
｜＿<input 【ループ用の要素２start】>
｜＿<label>
｜＿<span 【ループ用の要素２end】>
｜
｜＿<input 【ループ用の要素２start】>
｜＿<label>
｜＿<span 【ループ用の要素２end】>
<span 【ループ用の要素１end】>
<h2 【ループ用の要素１start】>見出し２</h2>
<a>
｜＿<input 【ループ用の要素２start】>
｜＿<label>
｜＿<span 【ループ用の要素２end】>
<span 【ループ用の要素１end】>
<h2 【ループ用の要素１start】>見出し３</h2>
<a>
｜＿<input 【ループ用の要素２start】>
｜＿<label>
｜＿<span 【ループ用の要素２end】>
｜
｜＿<input 【ループ用の要素２start】>
｜＿<label>
｜＿<span 【ループ用の要素２end】>
<span 【ループ用の要素１end】>
その解釈で間違いないです。タグの問題に関してはCSSの編集で対応してみることにします。
あと1つ後付けする形になってしまうのですが、inputタグにIDを振りたいのですが、
test1
｜＿<input id="A1B1">
｜＿<input id="A1B2">
｜＿<input id="A1B2">
test2
｜＿<input id="A2B1">
test3
｜＿<input id="A3B1">
｜＿<input id="A3B2">
｜＿<input id="A3B3">
A○はtest1~test3の親グループの数、B○は子要素の数、といった風にIDを振りたいのですが可能でしょうか？
$indexを使って実現しようとしているところなのですが、うまくいかないので知恵を貸してくださると助かります。
内容異なりますのでもう一つ回答欄を使わせていただきました。
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
h2～spanまでをひとまとまりとして繰り返して、さらにその中でinput～spanの要素を繰り返したいのですが、上記の回答ですとlabelのみを繰り返しているイメージではないでしょうか？
また回答のHTMLもakabeeの想定しているものとは違うようでした。質問に追記しておくので確認して頂けると助かります。
回答を修正してlabelとspanが繰り返されるようにしてみたのですが、そういうことを意図しているわけではなさそうですね。ちょっとやりたいことが理解できていないように思いますので、追記を待ちたいと思います。
追記確認しました。それは私の意図通りです。
loop1とloop2があり、loop1が一度繰り返されるうちに、loop2がオブジェクトの数に応じて不定回繰り返されていると思います。（今回の例ではオブジェクトの数はハードコーディングしていますが。）
こういうことがやりたいのかなと思っていたのですが、違うようで、どういうことがやりたいのかがちょっと分かっていません。もう少し説明頂けると何か回答ができるかと思うのですが。
回答にある作成後のイメージが私の作りたい要素の形になるのですが、akabeeさんの回答ですと必要のないspan,labelが存在してしまいます。削れるのであれば削りたいところです。
またh2～aタグ1組に対してinput～spanタグの組（不定数）をぶら下げたいのです。
input～spanタグは不定数ですが、１つだった場合はinput～spanタグが1組、2つだった場合はinput～spanタグが2組作られるイメージなのですがどうでしょうか？
<h2>見出し１</h2>
<a>
｜＿<input>
｜＿<label>
｜＿<span>
｜
｜＿<input>
｜＿<label>
｜＿<span>
｜
｜＿<input>
｜＿<label>
｜＿<span>
<h2>見出し２</h2>
<a>
｜＿<input>
｜＿<label>
｜＿<span>
<h2>見出し３</h2>
<a>
｜＿<input>
｜＿<label>
｜＿<span>
｜
｜＿<input>
｜＿<label>
｜＿<span>
新規回答でコードを提示してみました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/14 08:54