I'd like to filter a list according to whatever the user enters in the textbox. I'm using angularJS. Why isn't the code working?
Question
I try to make my own filter called myFilter and try to pipe the person array through myFilter. All I get as the output is "Enter name: " followed by a textbox. Even if I try to write letters like A or B or C, nothing gets displayed.
<!DOCTYPE html>
<html>
<head>
<script src
="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Enter name: <input type="text" ng-model="test" /></p>
<ul>
<li ng-repeat="x in person | myFilter">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.filter('myFilter', function()
{
return function(x, test)
{
var i, c=0;
for (i=0; i<test.length; i++)
{
if (x[i] == test[i])
{
c++;
}
}
if (c==test.length)
{
return x;
}
}
});
app.controller('myCtrl', function($scope)
{
$scope.person = ['Alex', 'Buddy',
'Bob', 'Aaron', 'Clay', 'Clayton'];
});
</script>
</body>
</html>
1 answers
solution1
0 2017-12-24 09:21:35
There are a couple of issues here.
Firstly, you're getting an error because test is undefined. This is because your not passing anything in for the value. You need to pass the value into the filter, like so:
<li ng-repeat="x in person | myFilter: test">
But you also need to handle it being null / undefined, because at first it won't have a value, so we also need to add:
if (test == null) {
test = "";
}
Finally, the logic in the filter also needs to change. The value of x will be an array of names. The value of test will be a string. When you're doing if (x[i] == test[i]) that is testing that one of the names == one of the letters in the string.
In my example below, what I do instead is to check that the name starts with what has been typed in, and I remove any that don't.
Here is a working example:
var app = angular.module('myApp', []); app.filter('myFilter', function() { return function(x, test) { var i, c = 0; // Set default value: if (test == null) { test = ""; } return x.filter(function(name) { return name.indexOf(test) === 0; }); } }); app.controller('myCtrl', function($scope) { $scope.person = ['Alex', 'Buddy', 'Bob', 'Aaron', 'Clay', 'Clayton' ]; });
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p>Enter name: <input type="text" ng-model="test" /></p> <ul> <li ng-repeat="x in person | myFilter: test"> {{x}} </li> </ul> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.