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

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

使用例：

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

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

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

ng-classを使用できない場合（たとえば、SVGをスタイリングする場合）、クラスattrを条件付きで設定するために以下を使用しています：

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

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

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

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

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

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

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

したがってfalse、値として「false」という単語が生成されるため、使用しないでください。

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

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

たとえば、上記はfalseになります。

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

属性をハード設定することでこれを機能させました。また、属性のブール値を使用して属性の適用性を制御します。

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

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

これがお役に立てば幸いです。

Angularの最新バージョン（1.1.5）では、と呼ばれる条件ディレクティブが含まれていますngIf。それは異なっているngShowとngHide要素が隠されていないということではなく、すべてのDOMには含まれません。これらは作成にコストがかかるが使用されないコンポーネントに非常に役立ちます。

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

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

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

使用例：

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

出力する<div class="itWasTest">か<div>、値に基づいてparams.type

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

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

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

承認されたソリューション（Ashley Davisによって投稿されたもの）に関して、記述されたメソッドは、割り当てられた値が未定義であるという事実に関係なく、DOMに属性を印刷します。

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

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

myValueの背後にあるものに関係なく、value属性は引き続きDOMに出力され、解釈されます。Ng-modelはオーバーライドされます。

少し不快ですが、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ディレクティブ内でより詳細なチェックを使用することをお勧めします:)

また、次のような式を使用できます。

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

私は実際にこれを行うパッチを数か月前に書きました（誰かがfreenodeの#angularjsでそれについて尋ねた後）。

おそらくマージされませんが、ngClassに非常に似ています：https : //github.com/angular/angular.js/pull/4269

それがマージされるかどうかにかかわらず、既存のng-attr- *のものはおそらくあなたのニーズに適しています（他の人が述べたように）。

入力フィールドの検証では、次のことができます。

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

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

編集：この回答はAngular2 +に関連しています！タグを逃しました！

元の答え：

特定の入力値が設定されている場合に属性を適用（または設定）するだけの非常に単純なケースについては、次のように簡単です。

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

それは同じです：

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

（したがって、オプションの値が指定されている場合は適用されます。そうでない場合、式はfalseになり、属性は適用されません。）

例：色だけでなく任意のスタイルも適用できる場合がありました。（@ Input（）色が指定されていなくても）color属性がすでに設定されているため機能しませんでした。

@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;
...
}

したがって、「style.color」はcolor属性が存在する場合にのみ設定され、それ以外の場合は「styles」文字列のcolor属性を使用できます。

もちろん、これは

[style.color]="color" 

そして

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

Angular 2の解決策が必要な場合に備えて、以下のようにプロパティバインディングを使用します。たとえば、入力を条件付きで読み取り専用にしたい場合は、中括弧にattrbuteを追加し、その後に=記号と式を追加します。

<input [readonly]="mode=='VIEW'"> 

これを機能させることができました：

ng-attr-aria-current="{{::item.isSelected==true ? 'page' : undefined}}"

ここでの良い点は、item.isSelectedがfalseの場合、属性が単にレンダリングされないことです。