it-swarm.asia

كيفية تصفية حسب خاصية الكائن في angularJS

أحاول إنشاء عامل تصفية مخصص في AngularJS يقوم بتصفية قائمة الكائنات حسب قيم خاصية معينة. في هذه الحالة ، أريد التصفية حسب الخاصية "القطبية" (القيم المحتملة لـ "موجبة" ، "محايدة" ، "سلبية").

إليك رمز العمل الخاص بي بدون عامل التصفية:

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>

هنا صفيف "$ scope.tweets" بتنسيق JSON:

{{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 (قطبية)". يبدو أنني لا أقوم بإدخال المعلمات الصحيحة للوصول إلى خاصية كائن "الاستقطاب".

أيه أفكار؟ هو محل تقدير كبير ردكم.

132
sh3nan1gans

ما عليك سوى استخدام عامل التصفية 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

214
Blackhole

الوثائق لديه الجواب الكامل. على أي حال هذا هو كيف يتم ذلك:

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

سيتم تصفية age فقط في صفيف data و true للمطابقة التامة.

للترشيح العميق ،

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

$ هي خاصية خاصة للمرشح العميق و true للمطابقة التامة مثل أعلاه.

26
Abel Terefe

يمكنك أيضًا القيام بذلك لجعله أكثر ديناميكية.

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

ثم سوف ن كرر كأن تبدو هذه

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

بالطبع هذا المرشح سوف يستخدم فقط للترشيح بواسطة قطبية

23
Llewellyn Collins

لدينا مجموعة على النحو التالي:


 enter image description here

بناء الجملة:

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

مثال:

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

-OR-

بناء الجملة:

ng-bind="(input | filter)"

مثال:

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

يمكنك تجربة هذا. عملها بالنسبة لي "الاسم" هو خاصية في arr.

repeat="item in (tagWordOptions | filter:{ name: $select.search } ) track by $index
3
Satish Singh