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=previewhttp://plnkr.co/edit/wZIOF1uAvEgB9UPD1EnW?p=preview
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
필터링할 필드를 지정하지 않으면 기본 필터가 모든 필드의 값과 일치합니다. a를 입력하면 각도는 기본적으로 false를 문자열로 변환하고 a는 false와 일치합니다. 필터 조건을 이렇게 바꾸면
으아악a를 입력하면 결과가 없습니다. 즉, 이름 필드의 값만 필터링된다는 의미입니다.
ng의 기본값은제품의 세 가지 필드인key,name,is_in_presale입니다. >는 문자열로 변환되어 입력 내용과 비교되므로a는 실제로false의a와 일치합니다.true를 입력해 보면 결과의 차이를 느낄 수 있습니다.ng默认把你product里三个字段key，name，is_in_presale都转成字符串和你的输入去比较了，所以a其实匹配到的是false里的a。你可以试试输入true，就感受到结果区别了。如果需要指定字段进行
filter필터에 대한 필드를 지정해야 하는 경우 다음 문서를 참조하세요.
아니면 내 플런커를 보세요🎜