使用 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中文网2017-05-15 17:04:05
フィルターするフィールドを指定しない場合、デフォルトのフィルターはすべてのフィールドの値と一致します。 a を入力すると、angular はデフォルトで false を文字列に変換し、a は false と一致します。フィルター条件をこれに変更すると
リーリーa を押すと、結果は表示されません。これは、名前フィールドの値のみがフィルターされることを意味します。
ringa_lee2017-05-15 17:04:05
ng
は、product
の 3 つのフィールド (key
、name
、is_in_presale
) にデフォルト設定されているためです。 > は文字列に変換され、入力と比較されるため、a
は実際には false
の a
と一致します。 true
を入力してみて、結果の違いを感じてみてください。 ng
默认把你product
里三个字段key
,name
,is_in_presale
都转成字符串和你的输入去比较了,所以a
其实匹配到的是false
里的a
。你可以试试输入true
,就感受到结果区别了。
如果需要指定字段进行filter
filter
のフィールドを指定する必要がある場合は、ドキュメントを参照してください:
あるいは私のプランカーを見てください🎜