304

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

使用例:

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

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

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

4

13 に答える 13

21

Angular の最新バージョン (1.1.5) には、 という条件付きディレクティブが含まれていますngIf。要素が隠されているわけではなく、DOM にまったく含まれていないという点でngShowand とは異なります。ngHideこれらは、作成にコストがかかるが使用されていないコンポーネントに非常に役立ちます。

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>
于 2013-07-09T16:48:47.083 に答える
16

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

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

使用例:

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

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

于 2015-09-10T22:10:53.393 に答える
10

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

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

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

于 2015-06-05T08:29:30.573 に答える
7

受け入れられた解決策、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 ディレクティブ内でより詳細なチェックを使用することをお勧めします:)

于 2014-07-09T21:53:07.280 に答える
6

また、次のような表現を使用することもできます。

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>
于 2015-12-22T14:30:30.150 に答える
5

私は実際にこれを行うためのパッチを数か月前に書きました (誰かが freenode の #angularjs で質問した後)。

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

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

于 2013-11-30T17:48:46.577 に答える
2

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

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

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

于 2016-04-14T18:45:06.530 に答える
0

Angular 2のソリューションが必要な場合に備えて、以下のようにプロパティバインディングを使用します.

<input [readonly]="mode=='VIEW'">
于 2018-07-20T21:10:47.693 に答える