9

だから私はAngularJSのチュートリアルを実行しています：

コントローラで配列が定義されており、ng-repeat {{feature.name}} {{feature.description}}をループしているときに呼び出すことで、配列内のさまざまなポイントを返します。

私が理解していないのは、配列に「重要度」と呼ばれる3番目のポイントがあり、それが1から10までの数値であるとしましょう。その数値をHTMLに表示したくないのですが、やりたいのは配列内の「重要度」の数値が10対1の場合は、フィーチャに異なる色を適用します

だから私はこれを行うためにifステートメントをどのように書くのですか？

すなわち

<p style="**insert if statement: {{if feature.importance == 10}} color:red; {{/if}} **">{{feature.description}}</p>

それが正しいかどうかはわかりませんが、それが私がやりたいことです

4

8 に答える 8

11

if利用可能な声明はないと思います。あなたのスタイリングの目的のために、ng-class使用することができます。

<p ng-class="{important: feature.importance == 10 }">

ng-switchまた便利です。

- アップデート -

見てください： https ：//stackoverflow.com/a/18021855/1238847

angle1.2.0RCはng-ifをサポートしているようです。

于 2012-10-01T00:43:37.687 に答える
7

実際、Angular1.2.0には三項演算子があります。

<p style="{{feature.importance == 10 ? 'color:red' : ''}}">{{feature.description}}</p>
于 2013-10-27T19:43:45.567 に答える
6

答えは更新が必要だと思います。

以前は、AngularUIプロジェクトからngIfディレクティブを使用できました（それでもダウンロードしたい場合は、ここにコードを記述してください）。悪いニュースは、それがもう維持されていないことです。

良いニュースは、公式のAngularJSリポジトリ（不安定なブランチ）に追加され、まもなく安定したもので利用できるようになることです。

<div ng-if="something"> Foo bar </div>

要素を非表示にするだけDIVでなく、DOMからも削除します（何かが偽物の場合）。

于 2013-08-02T16:27:22.437 に答える
3

ng-classがおそらくあなたの問題に対する最良の答えですが、AngularUIには「if」ディレクティブがあります。

http://angular-ui.github.com/

検索：DOMを非表示にするのではなく、DOMから完全に削除します。

「ui-if」を使用して、現在の月を基準にして、データ値をラベルまたは入力のどちらとしてレンダリングするかを決定しました。

<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>
于 2012-10-02T13:35:17.750 に答える
3

優先順位がラベルである場合は、前のSO回答に示されているようにng-class内で使用するスイッチフィルターを作成できます：https ：//stackoverflow.com/a/8309832/1036025 （スイッチフィルターの場合）コード）

<p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>
于 2013-03-27T16:43:12.923 に答える
1

以下のコード行を試すこともできます

<div class="{{is_foo && foo.bar}}">

is_fooがtrueの場合、foo.barが表示されます。

于 2013-03-26T20:23:58.113 に答える
1

この最初のものは、何かがDOMに1回だけ存在する必要があるかどうかを評価し、ページにウォッチリスナーを追加しないディレクティブです。

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つ目は、ウォッチリスナーなしで1回だけ要素に属性を条件付きで適用するディレクティブです。

すなわち

<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');
          }
        });
      }
    }
  }
});

もちろん、Angularに組み込まれた動的バージョンを使用できます。

<div ng-class="{ 'myclass' : item.iscool }"></div>

新しいngを使用することもできます-基本的にuiを置き換えるangularjsによって追加された場合-angularuiチームによって作成された場合、これらは条件付きでDOMに追加および削除し、監視リスナーを追加して評価を続けます。

<div ng-if="item.iscool"></div>
于 2013-10-12T21:16:43.180 に答える
1

また、機能するのは次のとおりです。

<span>{{ varWithValue || 'If empty use this string' }}</span>
于 2015-02-02T16:25:41.620 に答える