2016-09-13 18 views
-1

入力に入力すると、ulは自分の入力を含むliのみを表示します。たとえば、「広告」を入力している場合は、「Add to todos」liだけを表示します。私が入力を諦めれば、ulは元に戻って、すべてのLiが再び表示されます。それを実現するには?角度を使って配列をフィルタリングする方法は?

以下のコードです。

<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

作成[**スタックスニペット**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets)OR [* *誰かがあなたに何か助けを提供できるように、最小、完全、および検証可能な例**](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> 
関連する問題