Angular.js: DL / DD / DTを使用したngRepeat

第二にこれ。 私はしばらくの間この問題を抱えています。

@IgorMinarは、コメントベースのng-repeat（https://github.com/angular/angular.js/pull/1646）でいくつかの作業を行いましたが、コメントはすべてのブラウザーでうまく再生されないため、そうではない可能性があります。マージされました。 代わりに、おそらく「開始と終了の繰り返しタグ」または「開始-繰り返しと繰り返しラベルの要素数」のいずれかを使用した代替ソリューションを検討しています。

{{}}のようなペア内でテンプレートを許可するのはどうですか

多分：
{{！ ng-repeat = "foo in l"

関連するメモで、私は2番目の補間フォームに大きな技術的課題がありますか？と同様の問題が
{{{}}}のように、html文字をエスケープせず、
新しいスパン？

2013年1月29日火曜日12:38 PM、ピートベーコンダーウィン<
[email protected]>は次のように書いています：

@IgorMinar https://github.com/IgorMinarは、
コメントベースのng-repeat（＃1646https：//github.com/angular/angular.js/issues/1646）
ただし、コメントはすべてのブラウザでうまく再生されるとは限らないため、再生される可能性は低くなります。
マージされます。 代わりに、彼らはおそらく代替ソリューションを検討しています
「開始リピートタグと終了リピートタグ」または「開始リピートと数
ラベルを繰り返す要素」

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1891#issuecomment-12856484で表示してください。

配列内のオブジェクトごとに2つの「td」要素を生成したいテーブルでこの問題が発生しました。

この機能を追加するための+1。 これと同じ制限に遭遇しただけです。

：いいぞ：

ここでも同じ問題があります。 「ng-repeat-children」のように、現在の要素ではなく子だけを繰り返すものや、「ng-omit-tag」（現在のタグを削除して子をそのままにしておく）のようなものを使用したいと思います。 ng-repeatと一緒に。 これにより、この問題を回避するために生成される大量の無効なマークアップを回避できます。

議論されている制限を完全に理解していない。 親要素にng-repeatを配置することが機能するのはなぜですか？ http://jsfiddle.net/JyWdT/13/
誰かが問題をより詳細に説明するフィドルを作成できますか？

lgalfaso、あなたのフィドルは、それぞれが1つの定義を持つ複数の定義リストを作成します。 必要な出力は、複数の定義を持つ1つの定義リストです。

または、私の場合、配列内のすべてのアイテムに対して「td」要素のペアを作成する必要があります。
配列があるとしましょう、

[{name:dan, age:15}, {name:steve, age:21}]

そして私は出力する必要があります：

<tr><td>dan</td><td>15</td><td>steve</td><td>21</td></tr>

現時点では、Angularでそれを達成する方法はありません。

tr要素にng-repeatを配置することでそれを行うことはできませんか？

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE?p=preview

日、午前2時24分PMに2013年4月21日、上zilles [email protected]は書きました：

lgalfaso、あなたのフィドルは、それぞれが1つの複数の定義リストを作成します
意味。 必要な出力は、複数の定義リストです。
定義。

または私の場合、のすべてのアイテムに対して「td」要素のペアを作成する必要があります
配列。
配列があるとしましょう、

[{名前：ダン、年齢：15 }、{名前：スティーブ、年齢：21 }]

そして私は出力する必要があります：

ダン15スティーブ21

現時点では、Angularでそれを達成する方法はありません。

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1891#issuecomment-16716788で表示してください
。

ああ、なるほど、私の前のコメントを無視する
2013年4月21日午前9時9分、「ジェイソン・トゥリム」ジェイソン。 [email protected]は書いた：

tr要素にng-repeatを配置することでそれを行うことはできませんか？

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE?p=preview

日、午前2時24分PMに2013年4月21日、上zilles [email protected]は書きました：

lgalfaso、あなたのフィドルは、それぞれが1つの複数の定義リストを作成します
意味。 必要な出力は、複数の定義リストです。
定義。

または私の場合、のすべてのアイテムに対して「td」要素のペアを作成する必要があります
配列。
配列があるとしましょう、

[{名前：ダン、年齢：15 }、{名前：スティーブ、年齢：21 }]

そして私は出力する必要があります：

ダン15スティーブ21

現時点では、Angularでそれを達成する方法はありません。

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1891#issuecomment-16716788で表示してください
。

dl / dt + ddの問題が発生したばかりなので、新しいng-repeat-children（またはng-repeat-inner）に必須のディレクティブがないことを確認します。

+1

新しい指令ng-repeat-innerの提案。 この提案に問題がなければ、すべてのガイドを変更します

同じng-repeatディレクティブを使用する方が良いと思いますが、元の投稿が示唆しているように、そのディレクティブをHTMLコメントで使用できるようにします。

このようなものが機能するはずです：

<dl>
  <!-- ng-repeat="(name, definition) in myList" -->
  <dt>{{name}}</dt>
  <dd>{{definition}}</dd>
  <!-- /ng-repeat -->
</dl>

繰り返されるブロックの開始と終了がどのように達成されるかは正確にはわかりませんが（ <!-- /ng-repeat -->は@ProLoserによって提案されました）、HTMLコメントを使用することは洗練された解決策になると思います。

ミニファイアがコメントやコメントに関するその他の問題を殺すことができることを考えると、私は
これは素晴らしいとは思わないでください。 しかし、私はng-repeatを使用するというアイデアが好きです。
属性ng-repeat-single-rootを含めることは可能でしょうか？
trueに設定すると、ルートなしでng-repeatを実行するもの
エレメント？ 例えば：

{私}

{私}

になります：

1

1

2

2

3

3

3：54 PMで火、2013年4月23日には、マニTadayonの[email protected] ：

同じng-repeatディレクティブを使用する方が良いと思いますが、許可します
そのディレクティブを元の投稿としてHTMLコメントで使用する
提案します。

このようなものが機能するはずです：

{{名前}}

{{意味}}

ブロックの開始と終了をどのように繰り返すかが正確にわからない
達成されるだろう（私は私の例では）、
しかし、HTMLコメントを使用することはエレガントな解決策になると思います。

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1891#issuecomment-16891970で表示してください
。

maxcan、ソースhtmlを有効に保つので、「single-root」の利点を見ることができますが、その構造では「dl」タグ内に他のものを追加することはできません...たとえば必要な固定定義動的定義のループの前に含める。 lgalfasoのソリューションはそれを処理します。

@maxcanは、大きな手直しやパフォーマンスの低下がなければ、このプロパティng-repeat-single-rootを追加することはできないと思います（まあ、それを追加して、それに基づいて動的にします）。 理論的根拠は、このプロパティの変更が再コンパイルを引き起こす可能性が高いということです[そして誰も再コンパイルを好まない]

@bowserseniorの提案が好きですが、最後のコメントとしてこれをお勧めします： <!-- /ng-repeat -->

それはパフォーマンスヒットの残念です。 とにかく、私は強く支持します
@lgalfasoのソリューション、ディレクティブをdivに入れることができ、
ただのコメント..

13:58の水曜日、2013年4月24日には、ディーンSoferの[email protected] ：

@bowsersenior https://github.com/bowserseniorの提案が好きですが、
締めくくりのコメントとしてこれをお勧めします：

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1891#issuecomment-16964155で表示してください
。

私は@ProLoserに同意します。これは、 <!-- /ng-repeat -->がHTMLコメントアプローチのより適切な終了タグであるということです。 1つの注意点として、angularではディレクティブをHTMLコメントで定義できるため、この問題の潜在的な解決策としてHTMLコメントを破棄できるとは思いません。 コアアングル開発者は、このスタックオーバーフローの質問でこの問題に対処するためにHTMLコメントを使用することを計画していることを示したことを覚えておいてください（元の投稿者が指摘したように）：

• http://stackoverflow.com/a/10458127/457819

せずにこれを行う方法がある限り、私はそれらを破棄してもかまいません
コメント。

14:41の水曜日、2013年4月24日には、マニTadayonの[email protected] ：

@ProLoserhttps ： //github.com/ProLoserに同意します HTMLコメントアプローチのより良い終了タグです。 一つ
注意、angularではディレクティブをHTMLコメントで定義できるので、私はしません
これに対する潜在的な解決策として、HTMLコメントを破棄できると考えてください
問題。 コアのAngular開発者が彼らを示したことを覚えておいてください
このスタックオーバーフローでこの問題に対処するためにHTMLコメントを使用する予定です
質問（元のポスターで指摘されているように）：

• http://stackoverflow.com/a/10458127/457819

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1891#issuecomment-16969268で表示してください
。

@lgalfasoのng-repeat-innerに+1します。 私はついにこれを成し遂げる何かが欲しいです。

ノックアウトはコメントでこれを行います。 ノックアウトでdlタグを使用して行ったことを移植しようとしていますが、この問題が解決されるまでそれは不可能のようです。

これは私の意見ですので、 @ mheveryまたは@IgorMinarからの入力なしで、これを一粒の塩で取ってください。
コメントを使用してng-repeatを機能させる方が柔軟であることがわかります。とにかく、$ compilerを変更しないと自然に見えないため、「betweencomments」タイプのディレクティブを処理できます。 その理由は、ディレクティブが、想定されていることを実行するために与えられた要素の外側をネストして見ることに注意を払う必要があるのは奇妙に見えるからです。

コメント/コメントなしが継続的な論争の理由である場合、私たちは両方を持っているだけではいけませんか？ これほど一般的な問題が3か月以上解決されていないことを理解するのは難しいと思います。 この背後にある理由が主に実装に関する論争によるものである場合、より「最適な」ものを何もせずに長く待つよりも、実際に実装する（そしておそらく将来的に更新/追加する）方が望ましいようです。

ただし、ほとんどの場合、ng-repeat-innerが特定の何かの「内部」で要素のセットを繰り返すことを指す場合、ほとんどの場合、ある種の排他的な外部コンテナーを既に作成していることを意味します。 したがって、コメントの実装はより用途が広いかもしれませんが（おそらく、可能な限り避けたい余分な1/2行のコードですが）、それはよりも使用されていない（そしておそらく優先順位が低いはずです）と感じています。要素内ディレクティブ。

HTMLコメントを使用するかどうかの問題は、この問題が数か月間未解決であるという事実とは何の関係もありません。 必要なのは、問題を決定して解決策を実装するために、Angularメンテナからの注意だけだと思います。

コメントベースのリピーターの問題については、 https：//github.com/angular/angular.js/pull/1646を参照して@lgalfasoソリューションは、

＃1646を指摘していただきありがとうございます。 @mheveryによるその議論にはするコメントがあります（おそらくフォーマットエラー）：

その「より良い方法」が何であるかを私たちが知っていたらいいのにと思います！

コアチームのコンセンサスは、現在この問題に取り組む最善の方法は次のいずれかであるということです（構文はまだ決まっていませんが、実装はこれらすべてでほぼ同じです）。

これらの例にはすべて2つのtdタグが含まれています。リピーターが任意の数の要素を繰り返すことを許可する必要があることを示したかったので、違法ですが、意図的にこれを行いました。この例をテーブルを使用するように変換することをお勧めします。とテーブルの行ですが、今すぐオフラインになり、リファクタリングする時間がありません。

構文A：

<dl>
  <dt ng-repeat="(name, definition) in myList">{{name}}</dt>
  <dd ng-repeat-next>{{definition}}</dd>
  <dd ng-repeat-next>{{definition}}</dd>
</dl>

構文B：

<dl>
  <dt ng-repeat-start="(name, definition) in myList">{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

構文C：

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-start>{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

構文D：

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-group>{{name}}</dt>
  <dd ng-repeat-group>{{definition}}</dd>
  <dd ng-repeat-group>{{definition}}</dd>
</dl>

長期的には、ブラウザのサポートが改善されたら、新しい<template>要素の使用を開始します。これにより、次のように簡単に実行できるようになります。

構文X：

<template>
  <dl>
    <ng repeat="(name, definition) in myList">
      <dt>{{name}}</dt>
      <dd>{{definition}}</dd>
      <dd>{{definition}}</dd>
    </ng>
  </dl>
</template>

このソリューションのPRを作成したい場合は、マージされます。 また、特定の構文を好む場合は、声を上げてください。

入力ありがとうございます。 私の見解では、構文Aは、次のようなネストされたループでは明確ではありません。

<dl>
  <dt ng-repeat="...">loop 1</dt>
  <dt ng-repeat="..." ng-repeat-next>loop 2</dt>
  <dd ng-repeat-next>is this within loop 2 or only loop 1</dd>
</dl>

構文BとCはほぼ同じですが、両方の選択肢が好きです（構文Bの方が優れていると思う場合でも）

何かが足りない場合を除いて、構文Dには構文Aと同じネストされたループの問題があります

純粋に最小限の文字を書かなければならないという理由で、可能であればBを選びます。 また、最も対称的に見えます。視覚的な対称性があるため、管理が最も簡単だと思います。

lgalfasosのコメントは、興味深いジレンマを指摘しています。 彼の例のネストされたループが2番目ではなく最初の要素にある場合はどうなりますか。 そうすると、何かが足りない場合を除いて、構文のすべてのバージョンが不明確になります。

@lgalfasoが提案したng-repeat-innerと構文Xのng repeatの違いは、 <template>ラッピングにもかかわらず、よくわかりません。 誰かが説明できますか？

私もそれを理解しているかどうかはわかりませんが、 <ng>タグはDOMの一部にはならないので、 dl下での不正なネスト構造を回避していると思います。

提案された構文については、Bに投票します。

構文Xの場合は、DOMの一部ではなく、さまざまなディレクティブをホストできる汎用ダミーラッパー要素<ng>を使用できると思います。 これは、 ng-repeat特定のユースケースにのみ適用されるng-repeat-innerよりも一般的です。

構文X場合は、長期的な目的は、のちょうどより一般的なバージョンであるng-repeat-inner 、私は感じるng-repeat-innerも（*のみではない）提案A、Bの一方に沿って採用する必要があり、次のC、D：

1. 構文Xとng-repeat-innerはどちらも同じdom構造を持っています
   ：構文Xが長期的な目標である場合、将来のリファクタリングを防ぐために、同様に構造的に整列するものがあればよいでしょう。
2. ほとんどの場合、とにかくng-repeat-inner十分です
   ：目的は、内部要素を繰り返す外部コンテナを作成することです。

@ daegon123（Xを含む）@IgorMinarの列挙された構文のいずれかとの間の差ng-repeat-inner構文を使用すると、任意の異なるコンテナなし要素の集合を繰り返してみましょうということです。 たとえば、 tableまたはtbody他の繰り返されない<tr>がある間に、一連の<tr>繰り返します。 その場合、繰り返す要素には、 ng-repeat-innerをバインドするための明確な親がありません。

<table>
    <thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

または、 <dl>内のオブジェクトごとに複数の定義

<dl>
    <dt ng-repeat-start="...">{{item.term1}}</dt>
    <dd>{{item.def1}}</dd>
    <dt>{{item.term2}}</dt>
    <dd>{{item.def2}}</dd>
    <dt>{{item.term3}}</dt>
    <dd ng-repeat-end>{{item.def3}}</dd>
</dl>

@ es128コメントとコードをありがとう。 それが、リストされている他の構文の1つに沿ってng-repeat-innerを受け入れることを提案した理由ですが、コメントに実際のコードが含まれているのを見て、 ng-repeat-innerが必要かどうか疑問に思い始めました。 何かに出くわした場合は、別のコメントを投稿します。ありがとうございます。

ng-repeat-innerの問題は、次のように、すべての場合に使用できるわけではないことです。

<ul>
  <li>some static prefix item</li>
  <!-- repeat these nodes -->
    <li>{{ something }}</li>
    <li>{{ something else }}</li>
  <!-- repeat end -->
  <li>some static postfix item</li>
</ul>

人工要素（divなど）をul（html仕様ごと）に入れることができないため、ここではng-repeat-innerを使用できません。

ところで、テンプレート要素を使用すると、ulとliの間に人工要素を配置できるようになります。

また、構文Xにあまり執着しないでください。これは、最終的に正確な構文を実行できるようになることの簡単で汚い例でしたが、まだ説明していませんが、ここに別の例があります。一：

構文Y：

<ul>
  <li>some static prefix item</li>
  <template repeat="item in items">
    <li>{{ item.name }}</li>
    <li>{{ item.owner }}</li>
  </template>
  <li>some static postfix item</li>
</ul>

ng-repeatグループにIDを設定するのはどうですか？
そうすれば、どのレベルからでも自由にアイテムを取り付けることができます。 何かのようなもの

<dl>
    <dt ng-repeat="item in items" ng-repeat-group="someId">{{item.term}}</dt>
    <dd ng-repeat-with="someId">{{item.definition}}</dd>
</dl>

必要な柔軟性が得られる可能性があります。

構文Cの提案された実装は、これが他の要素やディレクティブに対してこの同じメカニズムを簡単にすることを可能にする構文であると私が思うことがわかりました

いい仕事ルーカス！ 私は夜を過ごして構文Cを実装しようとしました。それは正しく機能しますが、すべてのng-repeatをコメントに変換するトランスクルージョンのため、ネストはサポートされていません。

ng-repeat-start探してDOMを横断できない場合、マッチングのためにng-repeat-end属性の深さを計算できません。 あなたのアプローチは問題を解決しているようです...

うーん...何かがおかしいようです。 コミットにドキュメントがないため、正しい構文を使用していない可能性があります。

これを見てください：
http://plnkr.co/edit/sVilxKaNrhNM4JrkuQ5r?p=preview

ネストされていない場合の出力は次のようになると予想しました。

Term: elastic
     Static term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
     This definition should be repeated for every term: 'par' term

そしてネストされたものの場合：

Term: elastic
     Static term
Subterm: superelastic
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'elastic' term
Subterm: subelastic
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'elastic' term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
Subterm: superpar
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'par' term
Subterm: subpar
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'par' term
     This definition should be repeated for every term: 'par' term

私は何かが足りないのですか？

@lrlopezあなたが置いた例は、最新バージョンのコードを使用していません。 また、23行目に追加の</dl>があります

迅速な返信ありがとうございます！ そうです、23行目に余分な</dl>ありました。ライブラリも更新しました。 それにもかかわらず、私はまだネストされた例を実行することができません...

わかりました。これは、DOMの同じレベルにある複数要素のディレクティブの実際の問題のようです。 この問題を修正してPRを更新しました

ng-repeat-innerやng-repeat-nextなどの修正は、実際のDOMノードへのバインド動作によって制限される無数の状況の1つのみを解決します。

すべてのディレクティブに個別にパッチを適用する代わりに、実際のツリーでレンダリングされない仮想ノードのサポートを追加することで、フレームワーク全体でこれを解決できます。

コメントを使用するという考え方は似ていますが、見苦しくて読みにくいコードになり、そのノードに名前を付けて何らかの方法で閉じる方法が必要です。 新しいコメントノード構文を発明する代わりに、既存のHTML構文を使用します。

たとえば、SASSサイレントクラスに似た概念として考えてください。

<div id="myComplexList">
    <ng-virtual ng-repeat="...">
        <a></a>
        <b></b>
        <c></c>
    </ng-virtual>
</div>

Result:

<div id="myComplexList">
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    ...
</div>

一般的な考え方に+1しますが、ng-repeat-groupのようなものを選びます。

<ng-repeat-group="b in ches">
// group markup to be repeated here
</ng-repeat-group>

私は仮想ノードのアイデアが好きですが、それがここでの問題の一般的な解決策になることには反対です。

可能であれば、人工コンテナの作成を制限したいと思います。 コンテナは全体的な結果のhtmlに表示されない場合がありますが、管理が必要なhtmlコードが乱雑になり始めます。

多くの場合、繰り返したいものを格納するためのコンテナが必要になります。 元：

<tr>
  <td ng-repeat-start>1</td>
  <td ng-repeat-end>2</td>
</tr>

（ここでのコンテナは[tr]です）

提案された仮想ノードソリューションを使用すると、これは次のようになります。

<tr>
  <ng-virtual ng-repeat="...">
     <td>1</td>
     <td>2</td>
  </ng-virtual>
</tr>

冗長なコンテナを作成する：この2行の追加でさえ、コードが長くなった場合にどうなるかを考えるのは不快です。

もう1つの問題は、コードが現在どのレベルのDOMにあるかを把握しようとするのが面倒になり始めることです。
これが@ es128からのコード

<table>
<thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

仮想ノードを使用すると、これは次のようになります。

<table>
<thead>...</thead>
    <ng-virtual ng-repeat="...">
        <tr">...</tr>
        <tr>...</tr>
        <tr>...</tr>
    </ng-virtual>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

最初の3つのtrと最後のtrの繰り返しは同じレベルですが、コードをざっと見ただけでは、それらを異なるレベルと間違える可能性があります。そうしないと、自分自身を見つけ始めます。特にこれらのものが入れ子になり始めた場合、コードがどのレベルで作業しているかを（おそらく間違って）面倒に計算します。

これが私が好きな（種類Bの）構文の特定のバージョンです：

<ul>
  <li>some static prefix item</li>
  <li ng-repeat-block="(name, definition) in myList">{{ something }}</li>
  <li>{{ something else }}</li>
  <li ng-repeat-block-close>{{ something else }}</li>
  <li>some static postfix item</li>
</ul>

@stanvassの提案は、 @ IgorMinarが構文Xとして投稿したもののバリエーションです。主な問題は、ブラウザーのサポートがないことです。

1つの内部要素のみを繰り返したい場合、 ng-repeat-startとng-repeat-end両方を持つことは冗長であることに気づきました。

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

これを防ぐng-repeat-singleもあればいいのにと思います。 元。

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

@ daegon123単一の要素を繰り返したい場合は、

<tr>
  <td ng-repeat="...">repeat this</td>
</tr>

ng-repeat-startもng- repeat-endも必要ありません

@lgalfasoありがとう、提案された構文に夢中になりすぎて、すでに持っていたものを忘れてしまったようです。 ng-repeat-start / endがすぐに実現されることを願っています。

この問題は、単に1つの要素を繰り返すことではないと思います。 親を繰り返さずに要素のセットを繰り返す方法についての詳細。 つまり、 <dt>..<dd>... -しかし、ここには他にも多くの良い例がありました。

構文Xは、繰り返しのネストを開始すると明確に定義される唯一の構文です。 構文ADで次のように記述します。

<template>
  <dl>
    <ng repeat="book in myList">
      <dt ng-repeat="author in book.authors">{{author.name}}</dt>
      <dd>{{book.title}}</dd>
      <dd>{{book.description}}</dd>
    </ng>
  </dl>
</template>

それはより良い提案です。
MyBlackberry®から送信

- - -オリジナルメッセージ - - -
投稿者：daegon123 [email protected]
日付：2013年5月6日月曜日22:57:16
宛先：angular /angular.jsangular。 [email protected]
返信先： "angular / angular.js" [email protected]
件名：Re：[angular.js] ngRepeat with DL / DD / DT（＃1891）

1つの内部要素のみを繰り返したい場合、 ng-repeat-startとng-repeat-end両方を持つことは冗長であることに気づきました。

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

これを防ぐng-repeat-singleもあればいいのにと思います。 元。

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

このメールに直接返信するか、GitHubで表示してください。
https://github.com/angular/angular.js/issues/1891#issuecomment -17524685

+1、これは大きな制限です。

：+1：これに対する解決策を見るのを楽しみにしています！ 今のところ<li>を使用しますが、Angularがこの解決策を見つけたら、そのマークアップをリファクタリングしたいと思います=）

＃2783はこれを解決しますか？

はい。 着陸したばかりのソリューションがあります：e46100f7097d9a8f174bdb9e15d4c6098395c3f2

この号を締めくくります。

エラーが発生しました：この簡単な例では<TypeError: Object #<Text> has no method 'hasAttribute'> ：

<table>
        <tr ng-repeat-start="value in [1,2,3,4]">I get repeated</tr>
        <tr ng-repeat-end>I also get repeated</tr>
    </table>

また、gevgenyが述べているように問題を取得します。
メソッドがありません 'hasAttribute'>

<tr>
                <td data-ng-repeat-start="column in selectedItem.Beds" class="text-center">Avail. Beds</td>
                <td data-ng-repeat-end>Extra Bed Spaces</td>
</tr>

@ kharnt0xこのpuulリクエストを参照してくださいhttps://github.com/angular/angular.js/pull/2859

＃2783はこれをどのように解決しますか：

{[{h: "1",
   o: [{h: "1.1",
        o: [{h: "1.1.1"},
            {h: "1.1.2"},
            {h: "1.1.3"}]},
       {h: "1.2",
        o: [{h: "1.2.1"},
            {h: "1.2.2"},
            {h: "1.2.3"}]},

...。

次のような出力が必要です。

<h1>1</h1>
<h2>1.1</h2>
<h3>1.1.1</h3>
<h3>1.1.2</h3>
<h3>1.1.3</h3>
<h2>1.2</h2>
<h3>1.2.1</h3>
<h3>1.2.2</h3>
<h3>1.2.3</h3> 

構文は何でしょうか？

@ChrisCinelli hgroup使用してみてください

<h1>1</h1>
<hgroup>
    <h2>1.1</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
    <h2>1.2</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
<hgroup>

そのため、hgroupはHTML5（http://html5doctor.com/the-hgroup-element/）から削除されたようですが、問題はもっと複雑で、ヘッダータグはたとえば使用されただけです。
これは明らかに許可されるべきユースケースであり、Angularの宣言型ビューの哲学をまったく破ることはありません...

あなたが探している特定の出力について、CSSを検討しましたか
カウンター？

見る：
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
http://css-tricks.com/almanac/properties/c/counter-increment/

14:46で火、2013年6月18日には、クリス・チネリの[email protected] ：

したがって、hgroupはHTML5から削除されたようです（
http://html5doctor.com/the-hgroup-element/）、その横に、私がそうであったように
問題はもっと複雑で、ヘッダータグは
例。
これは明らかに許可されるべきユースケースであり、
Angularのすべての宣言型ビュー哲学...

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1891#issuecomment-19644594で表示してください
。

明確にするために例としてヘッダーを使用しました...実際には、データ構造のレベルごとに異なる構造を持つ比較的複雑な<div>があります。

これまでに見つけた唯一の解決策は、Javascriptでデータ構造を線形化し、さまざまなレベルにng-switchを使用することです。これには、追加のdivレベルが必要になります。
このソリューションにはオーバーヘッドがあり（つまり、データ構造を線形化するためのメモリとCPU）、HTMLは、代わりに使用できるアンダースコアテンプレートよりもはるかに不明瞭に見えます...

レベルごとに指示を出すことはできますか？ どんな種類かわからない
あなたがここで話している構造なので、私はただストローをつかんでいるでしょう。
しかし、私の経験では、あなたが持っているときにng-switchはほとんど必要ありません
ディレクティブとng-includeへのアクセス、およびスパゲッティコードテンプレートへのアクセス。

16:27で火、2013年6月18日には、クリス・チネリの[email protected] ：

私はそれを明確にするために例としてヘッダーを使用しました...実際には私は持っています
のレベルごとに異なる構造を持つ比較的複雑なdiv
データ構造。

私がこれまでに見つけた唯一の解決策は、ツリーを線形化することです。
Javascriptを使用し、さまざまなレベルでng-switchを使用します。
このソリューションにはオーバーヘッドがあります（つまり、データを線形化するためのメモリとCPU
構造）およびHTMLは、
代わりに使用できるアンダースコアテンプレート...

—
このメールに直接返信するか、Gi tHubhttps：//github.com/angular/angular.js/issues/1891#issuecomment-19650391で表示してください
。

これはどのように見えるかです： http ：
かなり短いラベル（1.xx x）、説明、チェックマークの数などは、データベースから取得されます。
この部分をAngularに変換するオプションを検討していますが、これまでのところサイコロはありません。

現在のビューはかなりロジックがなく、何が起こっているのかを比較的明確にしています。
私がよく理解しているなら、あなたはJavaScriptの一部のすべてのレベルを壊さなければならないことをかなり示唆しています。

これは私には乱雑で、まとまりがなく、読みにくいように見えます。 このパネルを表示するためのすべての情報を含むデータ構造を考えると、ロジックが完全にビューに関連し、このビューに非常に固有であるのに、なぜ別のファイル（モジュール/コントローラー）でコードを使用する必要があるのですか？ 私見、コントローラーは次のようになります（そして現在の実装では現在です）：

• モデルからデータを取得する
• フレームワークがモデルをレンダリングできるように、モデルをビューに渡します

確かに、いくつかのdivを追加してCSSを変更することはできますが、Angularで機能させるためにこれが必要な場合、Angularは、ここで作業を行うのに便利でエレガントな方法の妨げになっていると感じます。

KnockoutJSのデータバインディングは、html要素<div data-bind="foreach: ...">へのバインディングと「コンテナレス制御フロー構文」 <!-- ko foreach: ... --><!-- /ko -->両方を可能にするため、非常に便利であることがわかりました。 Angularは、 @ bowserseniorが提案した構文と非常によく似た、同様の構文オプションのセットをサポートできます。

Knockoutの「コンテナレス」オプションの詳細については、以下をご覧ください。
http://knockoutjs.com/documentation/foreach-binding.html

@ mg1075仮想構文の場合は+1。
KnockoutJSを使用すると、ddコレクションとネストされたコレクションを簡単に処理できます。
例： http ：