web-dev-qa-db-ja.com

ng if with angular for string string

次のAngularコードがあります。

<li ng-repeat="select in Items">   
         <foo ng-repeat="newin select.values">
{{new.label}}</foo>

Ng-if条件を使用して特定のキャラクターを探すにはどうすればよいですか：

ng-if="select.name == '?'"

文字がここにあるときにのみコードを表示するには？私が持っている値は88？77のようなもので、数字は動的ですが、疑問符は常にそこにあり、それに基づいてフィルタリングすることはできません。

javascriptjquerycssarraysangularjs
31
Poiro

ES2015 UPDATE

ES2015には、文字列に別の文字列が含まれているかどうかを確認する String#includes メソッドがあります。これは、ターゲット環境でサポートされている場合に使用できます。 needleがhaystackで見つかった場合、メソッドはtrueを返し、そうでない場合はfalseを返します。

ng-if="haystack.includes(needle)"

ここで、needleはhaystackで検索される文字列です。

ブラウザの互換性 MDNの表を参照してください。これはIEおよびOperaではサポートされていないことに注意してください。この場合、 polyfill を使用できます。

String#indexOf を使用して、haystackのneedleのインデックスを取得できます。

  1. needleがhaystackに存在しない場合-1が返されます。
  2. needleがhaystackの先頭に存在する場合が返されます。
  3. それ以外の場合、needleが存在するインデックスが返されます。

インデックスを-1と比較して、needleがhaystackにあるかどうかを確認できます。

ng-if="haystack.indexOf(needle) > -1"
67
Tushar
ng-if="select.name.indexOf('?') !== -1"
10
Mathew Berg

Angularjs自体はjavascriptフレームワークであるため、すべてのjavascriptメソッドはangularjsに適用できます。したがって、angularディレクティブ内でindexOf（）を使用できます

<li ng-repeat="select in Items">   
         <foo ng-repeat="newin select.values">
<span ng-if="newin.label.indexOf(x) !== -1">{{newin.label}}</span></foo>
</li>
//where x is your character to be found
9
Shubham Nigam

コントローラ関数でそのようなチェックを行います。 HTMLは、ロジックのない読みやすいマークアップでなければなりません。

コントローラ：

angular.module("myApp")
.controller("myController",function(){
    var self = this;

    self.select = { /* ... */ };

    self.showFoo = function() {
        //Checks if self.select.name contains the character '?'
        return self.select.name.indexOf('?') != -1;
    }
});

ページの例：

<div ng-app="myApp" ng-controller="myController as vm">
    <p ng-show="vm.showFoo()">Bar</p>
</div>
0
LionC