2016-09-13 3 views
-1

Когда я вводил вход, ul показывает только li, которые включают мой вход. Например, если я ввожу «объявление», тогда показываю только «Добавить некоторые todos» li. И если я откажусь от ввода, ul вернется, и все Ли снова покажут. Как это реализовать?Как фильтровать массив в Угловом?

Это мой код ниже.

<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> 

** Как получить fillArray? ** Мой код неправильный.

+0

Создать [** Stack Отрывок **] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets) ИЛИ [* * Создайте минимальный, полный и проверенный пример **] (http://stackoverflow.com/help/mcve), чтобы кто-то мог предоставить вам любую помощь. – vivekkupadhyay

ответ

1
<body> 
<div ng-controller="ctr1"> 
    <input ng-model='newTodo' type="text" ng-keyup="$event.keyCode == 13 && addTodo()"> 
    <ul> 
     <li ng-repeat="todo in todos | filter : newTodo"> 
      <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); 
     }; 


    }]); 

</script> 
</body> 
Смежные вопросы