사용자가 텍스트 상자에 입력 한 내용에 따라 목록을 필터링하고 싶습니다. angularJS를 사용하고 있습니다. 코드가 작동하지 않는 이유는 무엇입니까?

myFilter라는 자체 필터를 만들고 myFilter를 통해 사람 배열을 파이프하려고합니다. 결과물은 "이름 입력 :"이고 텍스트 상자가옵니다. A 또는 B 또는 C와 같은 글자를 쓰려고해도 아무 것도 표시되지 않습니다.사용자가 텍스트 상자에 입력 한 내용에 따라 목록을 필터링하고 싶습니다. angularJS를 사용하고 있습니다. 코드가 작동하지 않는 이유는 무엇입니까?

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

출처

2017-12-24 Prateek Kembhavi

이 완벽하게 작동 않지만 test'이 – user184994

여기에는 몇 가지 문제가 있습니다.

우선 test이 정의되지 않았기 때문에 오류가 발생합니다. 이것은 값을 위해 아무것도 전달하지 않기 때문입니다. 당신과 같이, 필터에 값을 전달해야합니다

<li ng-repeat="x in person | myFilter: test">

을하지만 당신은 또한 처음에는이 값이 없기 때문에 그것이,/null로 정의되지 않은 것으로 처리 할 필요가, 그래서 우리는 또한 추가해야합니다 :

if (test == null) { 
    test = ""; 
}

마지막으로 필터의 로직도 변경해야합니다. x의 값은 이름 배열입니다. test의 값은 문자열입니다. if (x[i] == test[i])을 수행 할 때 문자열의 문자 중 하나 인 == 중 하나를 테스트합니다.

아래 예에서 입력 한 이름으로 시작하는지 확인하고, 입력하지 않은 이름을 제거하는지 확인합니다. 여기

가 작동 예입니다

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>

출처

2017-12-24 09:21:35 user184994

정의되지 않은'때문에 오류가지고있어,의 문자에 액세스하는 방법은 무엇입니까 필터 함수 안에있는 x의 배열 요소? –

네,'x.filter' 함수 안에는'name'의 문자 배열을 반환하는'Array.from (name)'을 사용합니다. – user184994

사용자가 텍스트 상자에 입력 한 내용에 따라 목록을 필터링하고 싶습니다. angularJS를 사용하고 있습니다. 코드가 작동하지 않는 이유는 무엇입니까?

답변

관련 문제