問題タブ [angular-ng-if]

次のスニペットがあります。

いくつかのテーブル行を書き出します。

別のスコープ (オブジェクトの配列) の値が同じ属性名を持ち、attr に基づいて ng-checked パラメータ (true または false) を設定する場合、チェックされたチェックボックスを表示したいと思います。2 番目の配列の値。

これは、次のような ng-repeat 内で内部ループを使用することを意味します。

AngularJSでどうすればいいですか?

アドバイスありがとうございます。

近くのチェックボックスに応じてコントロールに異なる値を表示させようとしています。私が使用しているコードはこれに非常に似ています:

チェックボックスが切り替えられると、両方の入力フィールドが同時に表示される短い瞬間が発生し、望ましくないレイアウト効果が発生します。最終的には正しく表示されますが、ラグをなくしてスムーズに交換できるようにしたいと考えています。(これは、ページ上にさらに多くのプロパティがあるか、ページの他の場所でさらに多くの他のことが行われていることに関連する JS パフォーマンスの問題であると想定しています。)

これを書き直して、パフォーマンスを向上させて目的の効果を得る方法はありますか? コントロール全体ではなくバインディングだけを交換することは可能ですか? または、遅延の原因となっている可能性のある他の何かを考えられる人はいますか?

最も古いメッセージを一番上に、最新のメッセージを一番下に表示するチャット メッセージ表示があります。アレイでを使用してng-repeatおり$scope.messages、新しいチャット メッセージがそのアレイに動的に追加されます。にはng-repeat、orderByメッセージを作成日でソートするのに役立つフィルター コンポーネントがあります。

ng-ifメッセージが同じ日に同じユーザーによって送信されたときに、HTML の特定の側面 (ユーザーのアバター、名前、msg-timestamp など) を非表示にするために使用しようとしています。ただし、新しいメッセージが配列に追加されると、私のロジックは台無しになります。$scope.messages

HTML の短縮版:

該当するチャット コントローラーは次のとおりです。

このコードは一見しただけで機能します。最初は、orderByフィルターのため、最後のインデックスの$scope.messagesメッセージが実際には最初のメッセージであり、インデックス0のメッセージが最後に追加されたメッセージです。

しかし、新しいメッセージが追加されるたびに、Angular はスコープを動的に更新し、orderByフィルターが適用されるまでの一瞬の間、その新しいメッセージは の最後のインデックスに置かれます$scope.messages。これにより、メソッドの背後にあるロジックが失わng-ifれ、同じユーザーからのすべての新しいメッセージが、非表示にしたい HTML 要素と共に表示されます (つまり、メソッドでtrueng-ifが返されます)。

私の詳細によるとconsole.logging、 の HTML をコンパイルする時点で、インデックス0ng-ifのメッセージは最後に送信されたメッセージの 2 番目 (最新ではない) のままであり、最新の最新のメッセージは実際には のアイテムです。配列の最後のインデックス。これにより、最初のステートメントが有効になり、同じ日に同じユーザーによって送信されたすべての新しいメッセージに対して HTML 要素が表示されます (ページを更新しない限り、すべてが適切に表示されます)。if

誰でも考えられる回避策はありますか？

特定のビューでは、サイドバーとヘッダーが必要ですが、不要なビューもあります。AngularJS を使用して、これを達成するための最良の方法は何ですか。

私の現在の解決策は、サイドバーとヘッダー DIV で ng-if を使用し、コントローラーで、サイドバーとヘッダーを表示するビューに応じて $scope 変数を true または false に設定することです。

具体的な例は Youtube.com です。YouTube のホームページには、サイドバーとサブヘッダーがあり、その中に「何を見るか」と「音楽」というフィルターがあります。ただし、どの動画ページにも、サイドバーとサブヘッダーは存在しません。私はAngularJSでそれを達成したいと思っています。

index.html

ディスカッションボード.html

controllers.js

angularjs を使用して API を統合しています。

テキストボックス内での使用に問題がありng-ifます。

以下はHTMLコードの私のスニペットです：

ここで編集変数は、私のコントローラーにあるスコープ内にあり、次のように宣言しました：

したがって、edit が false の場合は bind を取得する必要がng-model="name" あり、edit が true の場合は bind を取得する必要がありますng-model="singleAppDetails.name" が、期待どおりにバインドしていません。

さらに$http.post、以下のようにデータをサーバーに投稿するために使用しています。

ただし、これは常に null データを送信します。

2 つのページ間で遷移をアニメーション化しようとしています。

コントローラーに変数を設定しFirstCtrl、コントロールSecondCtrlを作成しng-ifます。

問題は、最初はアニメーションが正常に機能するが、次からは機能しないことです。私は何が欠けていますか？

ルート:

最初のコントローラー:

2 番目のコントローラー:

index.html

レイアウト.html

css (サス):

重要：

これは、変数をビューから直接操作して、アニメーションが完全に機能することを証明するためのデバッグです。

ここで「プレビュー」をクリックすると、プレビュー モードの保存ボタンが無効になりませんhttp://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i

これはフォームオブジェクト(testAddForm)がng-ifのスコープで利用できないためだと思います。コントローラーでオブジェクトを使用する必要があることはわかっていますが、フォームオブジェクトはAngularによって作成され、ng-ifでは使用できません。どうすればそれを回避できますか?

JS: