AngularJS에서 객체 속성으로 필터링하는 방법


139

AngularJS에서 특정 속성 값으로 객체 목록을 필터링하는 사용자 정의 필터를 만들려고합니다. 이 경우 "polarity"속성 ( "Positive", "Neutral", "Negative"의 값)으로 필터링하고 싶습니다.

필터가없는 작업 코드는 다음과 같습니다.

HTML :

<div class="total">
    <h2 id="totalTitle"></h2>
    <div>{{tweets.length}}</div>
    <div id="totalPos">{{tweets.length|posFilter}}</div>
    <div id="totalNeut">{{tweets.length|neutFilter}}</div>
    <div id="totalNeg">{{tweets.length|negFilter}}</div>
</div>

JSON 형식의 "$ scope.tweets"배열은 다음과 같습니다.

{{created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user       screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"}}

내가 얻을 수있는 가장 좋은 필터는 다음과 같습니다.

myAppModule.filter('posFilter', function(){
return function(tweets){
    var polarity;
    var posFilterArray = [];
    angular.forEach(tweets, function(tweet){
        polarity = tweet.polarity;
        console.log(polarity);
        if(polarity==='Positive'){
              posFilterArray.push(tweet);
        }
        //console.log(polarity);
    });
    return posFilterArray;
};
});

이 메소드는 빈 배열을 리턴합니다. "console.log (polarity)"문에는 아무것도 인쇄되지 않습니다. "polarity"의 객체 속성에 액세스하기 위해 올바른 매개 변수를 삽입하지 않은 것 같습니다.

어떤 아이디어? 귀하의 답변에 크게 감사드립니다.


3
좋은 질문이지만 코드를 줄일 수 있지만 그중 많은 부분이 질문과 관련이 없습니다.
setec

답변:


218

filter필터 를 사용하기 만하면됩니다 ( 문서 참조 ).

<div id="totalPos">{{(tweets | filter:{polarity:'Positive'}).length}}</div>
<div id="totalNeut">{{(tweets | filter:{polarity:'Neutral'}).length}}</div>
<div id="totalNeg">{{(tweets | filter:{polarity:'Negative'}).length}}</div>

Fiddle


1
ng-repeat 문 외부에서 ng-click 이벤트에 사용자 정의 필터를 전달하여 항목 목록을 필터링하는 방법이 있습니까? 이 경우 등급을 기준으로 필터링 한 결과 위에 3 개의 "극성"버튼을 배치하려고합니다.
sh3nan1gans

2
잘 모르겠습니다. 필터링 할 극성을 선택하려는 경우 일반 텍스트 대신 범위 변수를 전달할 수 있습니다. filter:{polarity:polarityToFilter}여기서 $scope.polarityToFilter3 개의 버튼 중 하나를 클릭하면 채워집니다. 이것이 당신이하려는 일입니까?
블랙홀

그것은 효과가있는 것 같습니다. 그러나 내 앱에서도 개별 목록 항목을 삭제할 수 있어야합니다.
sh3nan1gans

필터링의 문제점은 필터를 적용 할 때마다 새 배열이 생성되어 필터링 된 항목과 필터링되지 않은 배열의 원래 인덱스 사이의 연결이 끊어집니다. 동점을 유지하는 방법이 있습니까 아니면 내 유일한 옵션은 ng-hide입니까? 다음은 ng-hide를 사용하여 필터링하는 방법에 대한 자습서입니다. bennadel.com/blog/…
sh3nan1gans

ngRepeat$index사용할 수있는 로컬 범위에 대한 특성을 제공합니다 .
블랙홀

27

문서는 완전한 해답을 가지고있다. 어쨌든 이것이 수행되는 방법입니다.

<input type="text" ng-model="filterValue">
<li ng-repeat="i in data | filter:{age:filterValue}:true"> {{i | json }}</li>

만 걸러 agedata배열과 true정확히 일치합니다.

딥 필터링의 경우

<li ng-repeat="i in data | filter:{$:filterValue}:true"> {{i}}</li>

$깊은 필터에 대한 특별한 속성입니다과는 true위와 같이 정확히 일치하는 것입니다.


간단하고 깨끗합니다.
scaryguy

이 필터는 Angular와 AngularJS 모두에 내장되어 있거나 작성되어야합니까?
P Satish Patro

23

더 역동적으로 만들 수도 있습니다.

<input name="filterByPolarity" data-ng-model="text.polarity"/>

그러면 ng-repeat는 다음과 같이 보일 것입니다.

<div class="tweet" data-ng-repeat="tweet in tweets | filter:text"></div>

이 필터는 물론 극성별로 필터링하는 데만 사용됩니다


5

우리는 아래와 같이 컬렉션을 가지고 있습니다 :


여기에 이미지 설명을 입력하십시오

통사론:

{{(Collection/array/list | filter:{Value : (object value)})[0].KeyName}}

예:

{{(Collectionstatus | filter:{Value:dt.Status})[0].KeyName}}

-또는-

통사론:

ng-bind="(input | filter)"

예:

ng-bind="(Collectionstatus | filter:{Value:dt.Status})[0].KeyName"

4

당신은 이것을 시도 할 수 있습니다. 나를 위해 일하는 '이름' 은 arr의 자산입니다.

repeat="item in (tagWordOptions | filter:{ name: $select.search } ) track by $index
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.