タグ付けされた質問 「angularjs-ng-repeat」

`ngRepeat`ディレクティブは、コレクションからアイテムごとに1回テンプレートをインスタンス化します。各テンプレートインスタンスは独自のスコープを取得します。指定されたループ変数は現在のコレクションアイテムに設定され、 `$ index`はアイテムのインデックスまたはキーに設定されます。

16
ng-repeatで重複した結果を除外する方法
ng-repeatJSONファイルを介して単純なを実行していて、カテゴリ名を取得したいと考えています。約100のオブジェクトがあり、それぞれがカテゴリに属していますが、カテゴリは約6つしかありません。 私の現在のコードはこれです： <select ng-model="orderProp" > <option ng-repeat="place in places" value="{{place.category}}">{{place.category}}</option> </select> 出力は100の異なるオプションで、ほとんどが重複しています。Angularを使用して{{place.category}}既に存在するかどうかを確認し、既に存在する場合はオプションを作成しないようにするにはどうすればよいですか？ 編集：私のJavaScriptでは$scope.places = JSON data、明確にするためだけに
6
AngularJS-ngRepeatでフィルタリングされた結果参照を取得する方法
私はそのようなフィルターでng-repeatディレクティブを使用しています： ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4" レンダリングされた結果を細かく見ることができます。次に、コントローラーでその結果に対していくつかのロジックを実行したいと思います。問題は、結果アイテムの参照を取得するにはどうすればよいですか？ 更新： 明確にするために：私はオートコンプリートを作成しようとしています、私はこの入力を持っています： <input id="queryInput" ng-model="query" type="text" size="30" placeholder="Enter query"> そしてフィルタリングされた結果： <ul> <li ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4">{{item.name}}</li> </ul> 次に、結果をナビゲートして、アイテムの1つを選択します。
21
ブートストラップを使用してng-repeatデータを3列で分割する方法
私のコードでng-repeatを使用しています。ng-repeatに基づいて「n」個のテキストボックスがあります。テキストボックスを3列に揃えたいのですが。 これは私のコードです <div class="control-group" ng-repeat="oneExt in configAddr.ext"> {{$index+1}}. <input type="text" name="macAdr{{$index+1}}" id="macAddress" ng-model="oneExt.newValue" value=""/> </div>
4
Angular ng-change delay
変更時にng-repeatリストをフィルタリングする入力があります。リピートには多くのデータが含まれており、すべてをフィルタリングするには数秒かかります。フィルタリングプロセスを開始する前に、0.5秒の遅延が必要です。この遅延を作成する角度の正しい方法は何ですか？ 入力 <input ng-model="xyz" ng-change="FilterByName()" /> 繰り返す <div ng-repeat"foo in bar"> <p>{{foo.bar}}</p> </div> フィルター機能 $scope.FilterByName = function () { //Filtering Stuff Here }); ありがとう
8
ng-model、ng-repeat、およびinputの難しさ
ngRepeatおよびを使用して、ユーザーがアイテムのリストを編集できるようにしようとしていますngModel。（このフィドルを参照してください。）ただし、私が試した両方のアプローチは奇妙な動作を引き起こします。1つはモデルを更新せず、もう1つは各キーダウンでフォームをぼかします。 ここで何か悪いことをしていますか？これはサポートされているユースケースではありませんか？ フィドルのコードを以下に示します。 <html ng-app> <head> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body ng-init="names = ['Sam', 'Harry', 'Sally']"> <h1>Fun with Fields and ngModel</h1> <p>names: {{names}}</p> <h3>Binding to each element directly:</h3> <div ng-repeat="name in names"> Value: {{name}} <input ng-model="name"> </div> <p class="muted">The binding does not appear to be working: the value in the …
18
Angular ng-repeat add bootstrap row every 3 or 4 cols
3列ごとにブートストラップ行クラスを挿入するための正しいパターンを探しています。colsには固定された高さがありません（そして私はそれを修正したくない）ため、これが必要です。そのため、デザインが壊れます。 これが私のコードです： <div ng-repeat="product in products"> <div ng-if="$index % 3 == 0" class="row"> <div class="col-sm-4" > ... </div> </div> </div> ただし、各行に表示される製品は1つだけです。私が最終結果として欲しいのは： <div class="row"> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div> </div> <div class="row"> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div> …
4
式でのAngularjs if-then-else構築
どういうわけか、angularjs式でif-then-else構成（3項演算子）を使用できますか？たとえば、ブール値を返す必要がある関数$ scope.isExists（item）があります。このようなものが欲しい <div ng-repeater="item in items"> <div>{{item.description}}</div> <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div> </div> 文字列を返す関数を使用できることはわかっていますが、if-then-else構文を式に使用できる可能性に興味があります。ありがとう。
19
AngularJS ng-repeatで繰り返し要素の合計を計算する
以下のスクリプトは、を使用してショップカートを表示しますng-repeat。配列の各要素について、アイテム名、その金額、および小計（product.price * product.quantity）が表示されます。 繰り返し要素の合計価格を計算する最も簡単な方法は何ですか？ <table> <tr> <th>Product</th> <th>Quantity</th> <th>Price</th> </tr> <tr ng-repeat="product in cart.products"> <td>{{product.name}}</td> <td>{{product.quantity}}</td> <td>{{product.price * product.quantity}} €</td> </tr> <tr> <td></td> <td>Total :</td> <td></td> <!-- Here is the total value of my cart --> </tr> </table>
3
ngRepeatの「トラックバイ」式を理解する
angularjsでのng-repeatの表現によるトラックがどのように機能するかを理解するのが困難です。ドキュメントは非常に少ないです：http : //docs.angularjs.org/api/ng/directive/ngRepeat これらの2つのコードスニペットの違いは、データバインディングと他の関連する側面の点でどのように説明できますか？ と： track by $index <!--names is an array--> <div ng-repeat="(key, value) in names track by $index"> <input ng-model="value[key]"> </div> なし（同じ出力） <!--names is an array--> <div ng-repeat="(key, value) in names"> <input ng-model="value[key]"> </div>
5
AngularJS：モデル要素がモデル配列からスプライスされたときにng-repeatリストが更新されない
2つのコントローラーがあり、それらの間でapp.factory関数を使用してデータを共有しています。 最初のコントローラーは、リンクをクリックすると、モデル配列（pluginsDisplayed）にウィジェットを追加します。ウィジェットが配列にプッシュされ、この変更がビューに反映されます（ng-repeatを使用して配列の内容を表示します）。 <div ng-repeat="pluginD in pluginsDisplayed"> <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div> </div> ウィジェットは、k2plugin、remove、およびresizeの3つのディレクティブに基づいて構築されています。removeディレクティブは、k2pluginディレクティブのテンプレートにスパンを追加します。上記のスパンをクリックすると、共有配列への正しい要素がで削除されArray.splice()ます。共有配列は正しく更新されますが、変更はビューに反映されません。ただし、別の要素が追加されると、削除後にビューが正しく更新され、以前に削除された要素は表示されません。 何が問題になっていますか？これが機能しない理由を教えてください。AngularJSで私がしようとしていることを行うためのより良い方法はありますか？ これは私のindex.htmlです： <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"> </script> <script src="main.js"></script> </head> <body> <div ng-app="livePlugins"> <div ng-controller="pluginlistctrl"> <span>Add one of {{pluginList.length}} plugins</span> <li ng-repeat="plugin in pluginList"> <span><a href="" ng-click="add()">{{plugin.name}}</a></span> </li> </div> <div ng-controller="k2ctrl"> <div ng-repeat="pluginD in pluginsDisplayed"> <div …
2
ng-repeat内のng-clickで非表示のdivを表示
私は、医療手順のjsonファイルをフィルター処理するAngular.jsアプリに取り組んでいます。ng-clickを使用して（同じページで）手順の名前をクリックすると、各手順の詳細が表示されます。これは私がこれまで持ってきたもので、.procedure-details divがdisplay：noneに設定されています： <ul class="procedures"> <li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp"> <h4><a href="#" ng-click="?">{{procedure.definition}}</a></h4> <div class="procedure-details"> <p>Number of patient discharges: {{procedure.discharges}}</p> <p>Average amount covered by Medicare: {{procedure.covered}}</p> <p>Average total payments: {{procedure.payments}}</p> </div> </li> </ul> 私は角度がかなり新しいです。助言がありますか？
2
ディレクティブはAngularJSのng-repeatスコープでスコープを分離します
（他の場所でディレクティブを再利用できるように）分離スコープを持つディレクティブがありng-repeat、このディレクティブをで使用すると、機能しません。 このトピックに関するすべてのドキュメントとスタックオーバーフローの回答を読み、問題を理解しました。通常の問題をすべて回避できたと思います。 したがって、ng-repeatディレクティブによって作成されたスコープが原因でコードが失敗することを理解しています。私自身のディレクティブは、isolateスコープを作成し、親スコープ内のオブジェクトに双方向のデータバインディングを行います。私のディレクティブは、このバインドされた変数に新しいオブジェクト値を割り当てます。これは、私のディレクティブを使用しない場合ng-repeat（親変数が正しく更新される場合）に完全に機能します。ただし、ng-repeatでは、割り当てによってng-repeatスコープ内に新しい変数が作成され、親変数には変更が反映されません。これはすべて、私が読んだ内容に基づいて予想どおりです。 また、特定の要素に複数のディレクティブがある場合、1つのスコープのみが作成されることも読みました。そしてpriority、各ディレクティブにa を設定して、ディレクティブが適用される順序を定義できます。ディレクティブは優先度でソートされてから、それらのコンパイル関数が呼び出されます（http://docs.angularjs.org/guide/directiveで優先度という単語を検索してください）。 したがって、優先順位を使用してディレクティブが最初に実行され、最終的に分離スコープが作成されるようにし、ng-repeat実行時に親スコープからプロトタイプを継承するスコープを作成する代わりに分離スコープを再利用できることを望んでいました。ng-repeatドキュメントは、優先レベルでそのディレクティブの実行と述べています1000。1優先度が高いか低いかは不明です。1ディレクティブで優先度を使用しても違いはないので、試してみました2000。しかし、それは事態をさらに悪化させます。私の双方向のバインディングがなりundefined、私のディレクティブは何も表示しません。 私は自分の問題を示すためのフィドルを作成しました。priorityディレクティブの設定をコメントアウトしました。名前オブジェクトのリストと、名前オブジェクトのname-row姓名フィールドを表示するという名前のディレクティブがあります。表示された名前をクリックselectedすると、メインスコープに変数を設定して欲しい。名前の配列、selected変数はname-row双方向のデータバインディングを使用してディレクティブに渡されます。 メインスコープで関数を呼び出すことでこれを機能させる方法を知っています。また、selectedが別のオブジェクトの内部にあり、外部オブジェクトにバインドすると、問題が発生しないことも知っています。しかし、私は現時点ではそれらの解決策には興味がありません。 代わりに、私が持っている質問は次のとおりです。 どうやって防ぐか ng-repeat親スコープからプロトタイプ的に継承するスコープを作成せずに、ディレクティブの分離スコープを使用するにはですか？ なぜ優先レベルなのか 2000ディレクティブのしないのですか？ バタランを使用して、どのタイプのスコープが使用されているかを知ることは可能ですか？
3
カスタムフィルター機能を備えたAngularJS複数フィルター
複数のフィルターとカスタムフィルター関数でリストをフィルターしようとしています。 オリジナルの動作するjsfiddleの例はhttp://jsfiddle.net/ed9A2/1/ですが、今度は年齢のフィルター方法を変更したいと思います。 カスタムフィルターを追加して、年齢がmin_ageとmax_age（年齢の間）の2つの入力値に基づいてフィルター処理されるようにします。 ドキュメントを調べた後。私は同様の質問をしている人々とユーザーMark Rajcokの回答http://docs.angularjs.org/api/ng.filter:filter#comment-648569667が良さそうであり、動作しているはずであることがわかりました。しかし、私はコードにそれを適用することに問題を抱えています。これは、他の複数のフィルターを持っているためです。 私はAngularJSに非常に新しい:( 私の試してみましたが動作していないフィドルはこちらですhttp://jsfiddle.net/ed9A2/20/ 動作しないコードのコピーペーストはこちら 見る <div ng-app ng-controller="MainController"> <table class="fancyTable"> <tr> <th>Player id</th> <th>Player name</th> <th>Age</th> </tr> <tr> <td><input ng-model="player_id" /></td> <td><input ng-model="player_name" /></td> <td> Min Age:<input ng-model="min_age" /> Max Age:<input ng-model="max_age" /> </td> </tr> <tr ng-repeat="player in players | filter:{id: player_id, name:player_name, age:ageFilter}"> <td>{{player.id}}</td> <td>{{player.name}}</td> …
3
angular ng-repeat表現に一致する場合、アイテムをスキップします
基本的にAngularに、ng-repeatの項目が式と一致する場合に項目をスキップするように指示する方法を探していcontinueます。 コントローラ内： $scope.players = [{ name_key:'FirstPerson', first_name:'First', last_name:'Person' }, { name_key:'SecondPerson', first_name:'Second', last_name:'Person' }] 今私のテンプレートでは、一致しないすべての人を表示したいと思いname_key='FirstPerson'ます。私はそれがフィルターである必要があると考えたので、それをいじるようにPlunkrをセットアップしましたが、運がありませんでした。Plunkrの試み
2
AngularJSフィルターが等しくない
非常に基本的な質問のようですが、構文を正しく理解できません。 <li class="list-group-item" ng-repeat="question in newSection.Questions | filter:Id != '-1'; " ng-mouseenter="hover = true" ng-mouseleave="hover = false"> <div href="#" editable-text="question.Text">{{question.Text}}</div> </li> 私が欲しいのは、idが-1でないすべての質問を表示することです。私は何が間違っているのですか。ありがとう！
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.