問題タブ [ng-style]

次のような複数の生のスタイル属性が必要です。

これは機能していません。私が使用すると動作します

しかしIE向けではありません。

ui モジュールを使用して ui-grid のサイズを自動変更したいのui.grid.autoResizeですが、ngStyle が適用されません

私が何を意味するかを示すために、このプランカーを実行しました

これが私のコードです

これは私のコードですng-style="background: {{x.background}}"

レンダリングするものng-style="background: #f4f4f4"

私は期待しているstyle="background: #f4f4f4"

angularjsアプリケーションで次のスタイルを使用していますが、これは正常に機能しています。これを ng-style に置き換えることはできますか?

私が試したがうまくいかなかったngスタイルのコード。

angularJS値（0〜100）で設定された幅で2つのdivを作成しようとしているので、これを行いました：

ただし、幅は videoRating の初期値で計算されます。その値を変更しても、スタイルは更新されません。

これを行う方法に関する提案はありますか？

追加しようng-cloakとしまし$scope.$apply()たが、運がありません

ng-repeat に使用される配列の値を変更するたびに、配列内のすべての項目に対して Ng スタイルのディレクティブの関数が起動されます。例を参照し、「getStyle(text)」関数のコンソール ログに注目してください。

http://jsbin.com/panotuyepe/1/edit?html,js,console,output

angularが変更されていないため、配列内の他のすべての値をダーティチェックするのを防ぐ方法はありますか? 変更は、配列リスト内の 1 つの項目のみに分離されました。他の ng-repeated 項目をチェックする必要はありません。

変数を更新することにより、 x、yの値を配列 (item.x、item.y) からng-style親要素のに渡したいです(更新はディレクティブによって行われます)。transformXtransformYng-click

-html-

-コントローラ-

これは私が達成できないことです-クリックされたアイテムが中央に配置されるようsectionに、子要素をクリックして親要素の()スタイル属性を更新するfigure必要があります(したがってitem.y * -1)。変数は更新されますが、スタイルは更新されません。

プランク

実際に機能して動的に更新するために、ディレクティブtransformX内のtransformY変数を作成する方法はありますか? ng-styleこれng-style="{'transform' : translate(transformX,transformY)}"はうまくいきません..

JSON データによって入力されるソフトウェア ログを示す次の表があります。

tr正常に動作しますが、重大度に応じて各要素の背景を変更できるようにしたいと考えています。たとえば、そのログの重大度が「ERROR」の場合、テーブル内のそのエントリの背景は赤、重大度が「MESSAGE」の場合は緑などになります。

はすでに見ましたng-styleが、この目的での使用方法がわかりませんでした。

助言がありますか？

他の誰かの時間を節約できることを期待して、何かを共有したかっただけです. 私はこの一見単純な概念にしばらく苦労しましたが、私の特定のニーズに合ったものを見つけることができませんでした.

問題：

私はAngularJSでゲームを構築していました.ng-repeat要素をクリック/タップして、発生するシナリオに基づいて選択するようにユーザーに促します. 永続的なスコア メーター/バーがあります。選択した ng-repeat アイテムのポイント値を使用して計算されたパーセンテージ値に幅をアニメーション化する必要がありました。これは私が jQuery で簡単に行うことに慣れているものですが、Angular はループに陥っていました。

ソリューション：

アニメートしたい要素の ng-style ディレクティブで関数を使用することになりました。その要素 (スコア バー) は index.html にあったため、rootScope も使用しました。

したがって、コントローラーで選択したアイテムのポイント値を取得すると、次のようになります。

次のように、パーセンテージを計算し、rootScope のスコア バーをアニメーション化できます。

次に、ビューで、次のように updatePoints 関数が ng-style を介してスコア バー要素に適用されます。

そのため、選択肢がクリック/タップされると、パーセンテージが計算され、そのパーセンテージに従ってスコア バーがアニメーション化されます。

これがフィドルです：http://jsfiddle.net/bjDesign/0mLksrym/18/

誰かがより良い解決策を持っているなら、私はそれを見たいです。私は本当にAngularをたくさん掘り下げています... jQueryを使用してクライアントに提供したいUIで動きのような流動性を実現する方法を理解するのに苦労しているように見えることがあります。

Angular を使用してdiv の backgroundImage を動的に変更すると、backgrond-image を設定する方法が 2 つあります。

最初：

<div style="background:url({{example_expression}})"></div>

二番目：

<div ng-style="{backgroundImage: 'url({{example_expression}})'}"></div>

しかし、変更するexample_expressionと、最初の方法だけが backgroundImage を動的に変更できます。

プランカーに例があります

ngStyle の何が問題になっていますか?