web-dev-qa-db-ja.com

AngularJSで条件付きで属性を適用するための最良の方法は何ですか？

たとえばスコープ上のブール変数に基づいて、要素に "contenteditable"を追加できるようにする必要があります。

使用例

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

$scope.editModeがtrueに設定されている場合、contenteditable = trueが要素に追加されます。このngクラスのような属性の振る舞いを実装する簡単な方法はありますか？私はディレクティブを書き、そうでなければ共有することを検討しています。

編集： 私が提案したattrsディレクティブと ng-bind-attrsの間にはいくつかの類似点があるようですが、1.0.0.rc3 で削除されたのはなぜですか？

angularjsangularjs-directive
274
Kenneth Lynne

私は、ng-classが使えないとき（例えば、SVGをスタイリングするとき）に、条件付きでクラスattrを設定するために以下を使っています。

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

同じアプローチが他の属性タイプにも機能するはずです。

（ng-attr-を使うには、最新の不安定版Angularを使用する必要があると思います。現在は1.1.4です）

264
Ashley Davis

Angular式を評価するために、属性の前にng-attrを付けることができます。式の結果が未定義の場合、これは属性から値を削除します。

<a ng-attr-href="{{value || undefined}}">Hello World</a>

生成します（値がfalseの場合）

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

それでfalseを使わないでください。これは値としてWordの "false"を生成するからです。

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

このトリックをディレクティブで使用するときディレクティブの属性は、値が欠けているとfalseになります。

例えば、上記は間違っているでしょう。

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}
113
cgTag

私はこれをうまく設定して属性を設定しました。また、属性のブール値を使用して属性の適用可能性を制御します。

これがコードスニペットです。

<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>

これが役に立つことを願っています。

92
jsbisht

最新版のAngular（1.1.5）には、ngIfという名前の条件付きディレクティブが含まれています。 ngShowやngHideとは、要素は隠されていないがDOMにはまったく含まれていないという点で異なります。それらは作成にコストがかかるが使用されていないコンポーネントに非常に便利です。

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>
22
Brian Genisio

ブールチェックに基づいて特定の値を表示する属性、またはブールチェックが失敗した場合は完全に省略される属性を取得するには、次のようにしました。

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

使用例

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

<div class="itWasTest">の値に基づいて<div>またはparams.typeを出力します

13
Glen

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

isTrue = trueの場合に生成されます：<h1 contenteditable="true">{{content.title}}</h1>

isTrue = falseの場合：<h1>{{content.title}}</h1>

9
Garfi

Ashley Davisによって投稿された、受け入れられた解決法に関して、それが割り当てられた値が未定義であるという事実にかかわらず、記述された方法はまだDOMの属性を印刷する。

たとえば、ng-modelとvalue属性の両方を持つ入力フィールド設定では、次のようになります。

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

MyValueの背後にあるものに関係なく、 value 属性はまだDOMに出力されるため、解釈されます。 Ngモデルは、その後、オーバーライドされます。

少し不快ですが、ng-ifを使うとうまくいきます。

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

Ng-ifディレクティブ内でより詳細なチェックを使用することをお勧めします:)

6
alexc

また、次のような式を使うことができます。

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>
5
Kamuran Sönecek

私は実際にこれを行うためのパッチを数ヶ月前に書いた（誰かがfangodeの#angularjsでそれについて質問した後）。

おそらくマージされないでしょうが、ngClassと非常によく似ています。 https://github.com/angular/angular.js/pull/4269

マージされているかどうかに関わらず、既存のng-attr- *はおそらく他の人が言っているようにあなたのニーズに適していますが、あなたが提案しているより多くのngClassスタイルの機能性よりは少しぎこちないかもしれません。

5
chronicsalsa

念のためにAngular 2、次にその簡単な解決法が必要な場合は、以下のようにプロパティバインディングを使用してください。入力を条件付きで読み取り専用にしたい場合は、属性の後ろに=記号と式を続けて角括弧で囲みます。

<input [readonly]="mode=='VIEW'">
1
Sanjay Singh

入力フィールドの検証のためにあなたがすることができます：

<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">

maxが100として定義されている場合のみ、これは属性discountTypeを%に適用します。

1
Nestor Britez

特定の入力値が設定されている場合にのみ属性を適用（または設定）したいという非常に単純なケースに関しては、それは同じくらい簡単です。

<my-element [conditionalAttr]="optionalValue || false">

それは同じです：

<my-element [conditionalAttr]="optionalValue ? optionalValue : false">

（そうでなければ、expressionがfalseでattributeが適用されない場合、optionalValueが適用されます。）

例：私は、色を適用するだけでなく任意のスタイルも適用するケースを考えました。色の属性は既に設定されているようには機能しませんでした（@Input（）の色が与えられなくても）

@Component({
  selector: "rb-icon",
  styleUrls: ["icon.component.scss"],
  template: "<span class="ic-{{icon}}" [style.color]="color==color" [ngStyle]="styleObj" ></span>",
})
export class IconComponent {
   @Input() icon: string;
   @Input() color: string;
   @Input() styles: string;

   private styleObj: object;
...
}

そのため、color属性がある場合は "style.color"のみが設定され、それ以外の場合は "styles"文字列のcolor属性を使用できます。

もちろん、これは次のようにしても達成できます。

[style.color]="color"

そして

@Input color: (string | boolean) = false;
0
Zaphoid