When I type in the input field, only the list items containing my input will be displayed in the unordered list. For example, if I type "Ad", then only the list item with "Add some todos" will be shown. When I clear the input, all the list items will reappear. How can I achieve this?
Here is the code:
<body>
<script src="angular.js"></script>
<div ng-controller="ctr1">
<input ng-model='newTodo' type="text" ng-keyup="$event.keyCode == 13 && addTodo()">
<ul>
<li ng-repeat="todo in fillArray">
<span>{{todo.text}}</span>
<button ng-click="removeTodo($index)">X</button>
</li>
</ul>
</div>
<script>
var app = angular.module("app",[]);
var contrl = app.controller('ctr1',['$scope',function ($scope) {
$scope.todos = [{text:"Add some todos"}];
$scope.newTodo = '';
$scope.addTodo = function () {
var text = this.newTodo.trim();
if(text){
this.todos.push(
{text:text}
);
this.newTodo= '';
}
};
$scope.removeTodo = function (index) {
this.todos.splice(index,1);
};
$scope.fillArray =$scope.todos.filter(function (item) {
return (item.text.toLocaleLowerCase().indexOf($scope.newTodo) > -1);});
}]);
</script>
</body>
**How do I populate the fillArray? ** My current approach seems to be incorrect.