angularjs ifステートメント？
https://stackoverflow.com//questions/12666307
-
11-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
だから私はangularjsのチュートリアルを走っています：
コントローラに定義されている配列があり、NG-Repeat {{feature.name}}} {{feature.description}}}}} {{feature.description}}}}} {{feature.description}}}}
私が理解していないのは、「重要度」と呼ばれる配列内の3番目のポイントを持っていると言うことができます。それは1から10までの数字です。その数字をHTMLに表示したくありませんが、欲しいもの配列内の「重要な」番号が10 Vs 1 の場合、そのようにさまざまな色を適用することです。
で、これを行うIF文を書く方法：
すき。
<p style="**insert if statement: {{if feature.importance == 10}} color:red; {{/if}} **">{{feature.description}}</p>
それが正しいならば、それが私がやりたいことです
解決 7
この最初のものは、何かが一度だけDOMにあるべきかどうかを評価し、ページに監視リスナーを追加しないかを評価するディレクティブです。
angular.module('setIf',[]).directive('setIf',function () {
return {
transclude: 'element',
priority: 1000,
terminal: true,
restrict: 'A',
compile: function (element, attr, linker) {
return function (scope, iterStartElement, attr) {
if(attr.waitFor) {
var wait = scope.$watch(attr.waitFor,function(nv,ov){
if(nv) {
build();
wait();
}
});
} else {
build();
}
function build() {
iterStartElement[0].doNotMove = true;
var expression = attr.setIf;
var value = scope.$eval(expression);
if (value) {
linker(scope, function (clone) {
iterStartElement.after(clone);
clone.removeAttr('set-if');
clone.removeAttr('wait-for');
});
}
}
};
}
};
});
この2番目のものは、時計リスナーなしで一度だけ要素に属性を条件付きで適用するディレクティブです：
すき。
<div set-attr="{ data-id : post.id, data-name : { value : post.name, condition : post.name != 'FOO' } }"></div>
angular.module('setAttr',[]).directive('setAttr', function() {
return {
restrict: 'A',
priority: 100,
link: function(scope,elem,attrs) {
if(attrs.setAttr.indexOf('{') != -1 && attrs.setAttr.indexOf('}') != -1) {
//you could just angular.isObject(scope.$eval(attrs.setAttr)) for the above but I needed it this way
var data = scope.$eval(attrs.setAttr);
angular.forEach(data, function(v,k){
if(angular.isObject(v)) {
if(v.value && v.condition) {
elem.attr(k,v.value);
elem.removeAttr('set-attr');
}
} else {
elem.attr(k,v);
elem.removeAttr('set-attr');
}
});
}
}
}
});
<div ng-class="{ 'myclass' : item.iscool }"></div>
Angularjsによって追加されたangularjsによって追加されたng-ifを使用することもできます。これは、AngulaUIチームによって作成されたUI-IFを置き換えることができます。
<div ng-if="item.iscool"></div>
他のヒント
私はif文があるとは思わない。
あなたのスタイリング目的のために、ng-classを使用することができます。
<p ng-class="{important: feature.importance == 10 }">
ng-switchも便利です。
- 更新 -
実際に角度1.2.0には Aがある。
.<p style="{{feature.importance == 10 ? 'color:red' : ''}}">{{feature.description}}</p>
答えは更新が必要だと思います。
以前はアンギュラプロジェクトからNGIFディレクティブを使用できます（コード安定した1つ
.
<div ng-if="something"> Foo bar </div>
NGクラスはおそらくあなたの問題に対する最善の答えですが、Angularuiは "IF"指令を持っています：
検索： それを隠すだけではなく、DOMからの要素を完全に削除します。
私は、現在の月を基準にして、データ値をラベルまたは入力としてレンダリングする必要があるかどうかを決定しました。
<tbody id="allocationTableBody">
<tr ng-repeat="a in data.allocations">
<td>{{a.monthAbrv}}</td>
<td ui-if="$index < currentMonth">{{a.amounts[0]}}</td>
</tr>
</tbody>
あなたの優先順位がラベルになる場合は、以前の回答に示されているようにNGクラスの内部を使用するスイッチフィルタを作成できます。
.<p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>
このコードの下のコードを試すこともできます
<div class="{{is_foo && foo.bar}}">
これはis_fooが真の場合はfoo.barを表示します。
作品も以下のとおりです。
<span>{{ varWithValue || 'If empty use this string' }}</span>
