web-dev-qa-db-ja.com

anglejs-ng-複数の条件の場合

だからこれは以前に尋ねられましたが、私の質問は_ng-if="country == 'ireland' || country='United Kingdom'"_ほど単純ではありません

私は次のようなことをする必要があります：

_ng-if="(country='ireland' || country='united kingdom') || (name='John' || name='Joe')"
_

私がしていることはこれです：
ng-if=" (settings.eur && title.usa != undefined || title.leak != undefined) || (settings.usa && title.eur != undefined || title.leak != undefined) || (settings.leak && title.eur != undefined || title.usa != undefined) || (settings.leak == false && settings.eur == false && settings.usa == false)"

しかし、それは最初の行をトリガーするだけであるか、少なくともそれが実行しているように見えます。

javascriptangularjsangular-ng-if
3
Shiny

私は自分が間違っていたことを見つけました。
ifタグを使用すると、式で三項演算子と（）_Unsure what its called_を使用できます。

例えば：
country == Ireland && (firstname == John || lastname == Doe) && console == PC

つまり：
_If the country is Ireland AND firstname is john OR lastname is Doe AND console is PC then return true._

そして、それがうまくいかなかったのは（）です。実際に機能させるには、閉じ括弧の後に== trueを付ける必要があります。
これにより、1つのng-ifで多くの式/条件を実行できました。

最終コード（これは私がそれを使ってやっていたことの例です）：

_ng-if="
settings.eur == true && settings.usa == false && settings.leak == false && (title.usa != undefined || title.rf != undefined || title.leak != undefined) == true ||
settings.usa == true && settings.eur == false && settings.leak == false && (title.eur != undefined || title.rf != undefined || title.leak != undefined) == true ||
settings.leak == true && settings.eur == false && settings.usa == false && (title.eur != undefined || title.usa != undefined || title.rf != undefined) == true ||

settings.eur == true && settings.usa == true && settings.leak == true && (title.usa != undefined && title.eur != undefined || title.rf != undefined) == true ||
settings.eur == true && settings.usa == true && settings.leak == false && (title.usa != undefined && title.eur != undefined || title.leak != undefined || title.rf != undefined) == true ||
settings.eur == true && settings.usa == false && settings.leak == true && (title.usa != undefined || title.rf != undefined) == true ||
settings.eur == false && settings.usa == true && settings.leak == true && (title.eur != undefined || title.rf != undefined) == true ||

settings.leak == false && settings.eur == false && settings.usa == false
"
_
1
Shiny

ここで考慮すべきことがいくつかあります。

代入演算子と等式演算子

Javascriptを使用する 等式演算子 （つまり、==）の代わりに 代入演算子 （つまり、=）：

ng-if="(country=='ireland' || country=='united kingdom') || (name=='John' || name=='Joe')"

演算子の優先順位と結合性

さらに、 演算子の優先順位 -条件が 論理AND （つまり、&&）は、 論理OR （つまり、||）。 グループ化演算子 （つまり、(および) --A.K.A。括弧）使用する right-associativity 必要に応じて。

たとえば、次の行：

(settings.eur && title.usa != undefined || title.leak != undefined)

右結合性のために変更できます：

(settings.eur && (title.usa != undefined || title.leak != undefined))

または、左の連想性を維持するには：

((settings.eur && title.usa != undefined) || title.leak != undefined)

ロジックをコントローラーに移動

コメントで述べたように、その大きな条件付きのロジックは、いくつかのコントローラーロジックに移動する必要があります。これにより、ビジネスロジックの更新とマークアップからの分離が簡単になります。

これを行う1つの方法は、以下の例のように関数を宣言することです。おそらく、変数が未定義かどうかをチェックするよりも簡単な方法は、以下の例で行われているように、変数を初期化することです。チェックボックスを切り替えてみてください。

angular.module('app', [])
  .controller('cont', function($scope) {
    $scope.country = 'ireland';
    $scope.name = 'Joe';
    $scope.settings = {
      eur: true,
      leak: false,
      usa: false
    };
    $scope.shouldShowLargerComplexContainer = function() {
      if (($scope.settings.leak == false && $scope.settings.eur == false && $scope.settings.usa == false)) {
        return true;
      }
      return false;
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="cont">
  country? name?
  <div ng-if="(country=='ireland' || country=='united kingdom') || (name=='John' || name=='Joe')">country Ireland and name is joe or john</div>
  Complex logic div?
  <div ng-if="shouldShowLargerComplexContainer()">larger complex div</div>
  <div>
    <input type="checkbox" ng-model="settings.eur" />eur</div>
  <div>
    <input type="checkbox" ng-model="settings.leak" />leak</div>
  <div>
    <input type="checkbox" ng-model="settings.usa" />usa</div>
</div>
2
Sᴀᴍ Onᴇᴌᴀ

サムの応答は大丈夫です。とにかく、これをより広い視点で見ると、この決定をビューレベルで行うかコントローラーで行うかをもう一度考える必要があります。

原則として、ロジックの分割を回避し、プロパティのメンテナンスコストを増加させるために、ビュー内にロジックを配置しないようにしてください。 （JSパーツ内のロジックのテストも簡単です）

1
Andoni

Angular 1.5.9+では、式に条件を入れることはできません。または、それを行うための新しい魔法の方法があります。何か足りないかもしれませんので、間違いないか確認してください。

ng-if="!item.title"-としてはもう有効ではありません！またはその他は無効な文字ではありません。お気に入り：

https://docs.angularjs.org/error/ $ parse/lexerr？p0 = Unexpected％20nextharacter＆p1 = s13-13％20％5B％3D％5D＆p2 = item.title％3Dfalse

変更ログ（ https://github.com/angular/angular.js/blob/master/CHANGELOG.md ）では、次のように呼び出されます：代入式のパフォーマンスを向上させる？

https://docs.angularjs.org/guide/expression

制御フローステートメントなし：Angular式で次のものを使用することはできません：条件、ループ、または例外。

私が見る唯一の解決策は、式をコントローラーに移動することですが、それを行う方法がまだわかりません。テンプレートに複数のループがあります。 Angularをアップグレードしないことをお勧めします。

0
busy