問題タブ [angularjs-ng-style]

ローカル スコープ内の各文字列の色のプロパティを変更する文字列とボタンのリストがあります。Controllerスコープからcolorプロパティを取得するため、新しく追加されたすべての文字列は黒になります。新しい文字列のローカルスコープでカラープロパティを初期化するにはどうすればよいですか?

これは、私の問題を示すための単なる例です。そのため、実際のプロジェクトでは、新しいプロパティをリスト (currentColor: 'Red' など) などに追加することはできません。私が知りたいのは、このスコープの作成時にローカルスコープのプロパティに値を設定するにはどうすればよいかということです。

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 の何が問題になっていますか?

Angular の ng スタイルと css の「calc()」を使用して次のインライン スタイリングを行っていますが、うまくいきませんでした。何が問題なのか教えてもらえますか?

編集2（回答）：同様の問題の解決策を探してこれに出くわした人にとって、解決策はGianmarcoの回答の下のコメントにあります。配列は、以下productusageの関数と同じ関数で前処理され$scope.alternate、結果は配列内の各項目に isAlternate フラグを設定するために使用されます。次に、これを ng-style または ng-class 属性で使用して、行で使用するスタイルを決定します。

編集:わかりやすくするために: RANames のグループがあります... RAFoo、RAFoo、RABar、RABar、RABar、RABar、RABaz、RABaz、RABaz など...そして、行が変わるまで色を交互にしたくありません新しい RAName にヒットします。同じ RAName を持つ可変数の RAName 値があるため、2 つの "RAFoo"、4 つの "RABar"、3 つの "RABaz" などが存在する可能性があり、変化する可能性があります。

コントローラーに次のコードがあります。

そして、私が持っているテンプレートでは:

テーブルの RAName フィールドと ProductDescription フィールドの色を交互に変えて、RAName に基づいて効果的に「グループ化」したいと考えています。PeriodCaseCt および PeriodCaseCt フィールドは色分けされています。これですべてがそのまま機能し、これで話が終わったことを願っていますが、これらのエラーがたくさん発生しています。

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"alternate(item.RAName) ? {'background-color':'#f5f5f5'} : {'background-color':'white'}","newVal":{"background-color":"white"},"oldVal":{"background-color":"#f5f5f5"}}

さて、最初のパスの後にこれらの値を監視する必要はありません。すべてが正しく設定され、エンドユーザーは開発者ツール/コンソールタブを開いていない限りわかりませんが、 $#私の％％アウト。これを改善/修正するにはどうすればよいですか?