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

使用 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伐。

membalas semua(2)
洪涛

Apabila anda tidak menentukan medan yang hendak ditapis, penapis lalai akan sepadan dengan nilai semua medan. Apabila anda memasukkan a, sudut harus menukar palsu kepada rentetan secara lalai dan padanan palsu. Jika anda menukar syarat penapis kepada ini

<li ng-repeat="pro in products | filter:{name:search}">{{pro.name}} - {{pro.key}}</li>

Jika anda menekan a, tidak akan ada hasil Maksudnya ialah hanya nilai medan nama yang ditapis.

左手右手慢动作

Oleh kerana ng secara lalai menukar tiga medan product, key dan name dalam is_in_presale anda kepada rentetan untuk perbandingan dengan input anda, jadi a sebenarnya sepadan dengan false dalam a. Anda boleh cuba menaip true dan rasai perbezaan hasilnya.

Jika anda perlu menentukan medan untuk filter, sila rujuk dokumen:

Atau lihat sahaja plunker saya

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!