angular.js - AngularJS filter:search 是如何匹配的 ng-repeat filter:search
伊谢尔伦
伊谢尔伦 2017-05-15 17:02:05
0
2
543

使用 angularJS 来进行测试,ng-reapt="pro in products | filter:search" 一个特别大的疑问
如下的这个测试,为什么 search 输入框中,输入 a也会有结果

测试代码:

<!DOCTYPE html>
<html>

<head>
  <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body>

  <script>
    var data = {
      "products": [{
        "key": "KEY1",
        "name": "iPhone6S",
        "is_in_presale": false
      }, {
        "key": "KEY2",
        "name": "iPhone7",
        "is_in_presale": true
      }],
      "activities": []
    };

    var cartApp = angular.module('cartApp', []);
    cartApp.controller('ProductListCtrl', function($scope, $http) {

      $scope.dump = function(input) {
        console.log(input);
      }
      $scope.products = data.products;
      //            $scope.change();
    });
  </script>


  <p ng-app="cartApp" ng-controller="ProductListCtrl">
    <input type="text" ng-model="search">
    <p style="clear: both"></p>

    <p class="" style="float: left;width: 20%">
      <h1>repeat</h1>
      <ol>
        <li ng-repeat="pro in products"> {{pro.name}} - {{pro.key}}</li>
      </ol>
    </p>
    <p class="" style="float: left;">
      <h1>normalProduct</h1>
      <ol>
        <li ng-repeat="pro in products | filter:search as result">{{pro.name}} - {{pro.key}}</li>
      </ol>
    </p>
    {{dump(result)}}

  </p>

</body>


</html>

测试地址

http://plnkr.co/edit/wZIOF1uAvEgB9UPD1EnW?p=preview

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全員に返信(2)
洪涛

フィルターするフィールドを指定しない場合、デフォルトのフィルターはすべてのフィールドの値と一致します。 a を入力すると、angular はデフォルトで false を文字列に変換し、a は false と一致します。フィルター条件をこれに変更すると

リーリー

a を押すと、結果は表示されません。これは、名前フィールドの値のみがフィルターされることを意味します。

いいねを押す +0
左手右手慢动作

ng は、product の 3 つのフィールド (keynameis_in_presale) にデフォルト設定されているためです。 > は文字列に変換され、入力と比較されるため、a は実際には falsea と一致します。 true を入力してみて、結果の違いを感じてみてください。 ng默认把你product里三个字段keynameis_in_presale都转成字符串和你的输入去比较了,所以a其实匹配到的是false里的a。你可以试试输入true,就感受到结果区别了。

如果需要指定字段进行filter

filter のフィールドを指定する必要がある場合は、ドキュメントを参照してください:

あるいは私のプランカーを見てください🎜
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!