Utiliser AngularJS pour les tests, ng-reapt="pro in products | filter:search" Une question particulièrement importante
Pour le test suivant, pourquoi taper search dans la zone de saisie a produit des résultats
<!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=previewhttp://plnkr.co/edit/wZIOF1uAvEgB9UPD1EnW?p=preview
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Lorsque vous ne spécifiez pas quel champ filtrer, le filtre par défaut correspondra aux valeurs de tous les champs. Lorsque vous entrez a, angulaire doit convertir false en chaîne par défaut et a correspond à false. Si vous modifiez les conditions de filtre comme ceci
Si vous tapez a, il n'y aura aucun résultat. Cela signifie que seule la valeur du champ de nom est filtrée.
Parce que
ngconvertit par défaut les trois champsproduct,keyetnamede votreis_in_presaleen chaînes pour comparaison avec votre entrée, doncacorrespond réellement àfalsedansa. Vous pouvez essayer de tapertrueet ressentir la différence dans les résultats.Si vous devez préciser un champ pour
filter, veuillez vous référer au document :Ou regardez simplement mon plunker