Nasıl angularJS nesne özelliği tarafından filtre

SORU

22 Temmuz 2013, PAZARTESİ

Nasıl angularJS nesne özelliği tarafından filtre

Belirli bir özellik değeri ile nesnelerin listesini süzer AngularJS özel bir filtre oluşturmak için çalışıyorum. Bu durumda, filtre istiyorum "kutup" (olası değerler,"", "", "") Negatif. Nötr Pozitif özellik

Burada filtre olmadan iş kodu:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Twittiment</title>
<link href="search_client.css" type="text/css" rel="stylesheet" />
<link href="tweet.css" type="text/css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="/ang-Twittiment/app/lib/angular/angular.js"></script>
<script src="search_client.js"></script>
<script src="/js/highcharts.js"></script>


</head>
<body data-ng-app="myApp" data-ng-controller ="TweetCtrl">
<div id="main">
<div id="search_box">
<h1 id="title">Twitter Sentiment Analysis</h1>
<input name="search_terms" autofocus="autofocus" data-ng-model="query"/>
<button id="search_button" data-ng-click="search()">Search</button>
<div id="data"></div>
I can add:{{1 3}}
</div>

<div id="search_results">
    Search tweets: <input name="filter" data-ng-model="text"/><span>Displaying {{(tweets|filter:text).length}} of {{tweets.length}} tweets</span>



    <div class="tweet" data-ng-repeat="tweet in tweets | filter:text">
        <div class="tweet_left">
            <div class="tweet_image">
                <a href="https://twitter.com/{{tweet.user.screen_name}}">
                    <img src="{{tweet.user.profile_image_url}}">
                </a>
            </div>
        </div>
        <div class="tweet_right">
            <div class="tweet_triangle"></div>
            <div class="tweet_row">
                <div class="tweet_username">
                    <a href="https://twitter.com/{{tweet.user.screen_name}}" target="search">{{tweet.user.screen_name}}</a>
                    <span class="tweet_name">{{tweet.user.name}}</span>
                    <span class="delete_tweet">Mark as irrelevant</span><input class="close_button" type="image" src="/xmark.jpg" alt="submit" ng-click= "delete($index)">
                </div>
            </div>
            <div class="tweet_row">
                <div class="tweet_text">{{tweet.text}}</div>
            </div>
            <div class="tweet_row">
                <div class="tweet_timestamp">
                    <img class="stream_bluebird" src="bird_16_blue.png">
                    <span class="retweets">{{tweet.retweet_count}} retweets</span>
                    <a href="http://twitter.com/{{tweet.user.screen_name}}/status/{{tweet.id}}" target="search" class="tweet_time_link">{{tweet.created_at}}</a>
                    <img src="reply.png" class="imageof_reply">
                    <a href="http://twitter.com/intent/tweet?in_reply_to={{tweet.id}}" target="search">Reply</a>
                    <img src="retweet.png" class="imageof_retweet">
                    <a href="http://twitter.com/intent/retweet?tweet_id={{tweet.id}}" target="search">Retweet</a>
                    <img src="favorite.png" class="imageof_favorite">
                    <a href="http://twitter.com/intent/favorite?tweet_id={{tweet.id}}" target="search">Favorite</a>
                </div>
            </div>
        </div>
        <div class="sentiment" data-ng-controller="RatingCtrl">
            <div class="rating" data-ng-model="tweet.polarity">{{tweet.polarity}}</div>
            <button data-ng-click="changeRating('Positive')"><img class="positive" src="/thumbs-up-button.jpg"></button>
            <button data-ng-click="changeRating('Neutral')"><img class="neutral" src="/thumbs-sideways-button.jpg"></button>
            <button data-ng-click="changeRating('Negative')"><img class="negative" src="/thumbs-down-button.jpg"></button>
            </div>

</div>
</div>
</div>
<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>
<div id="container" style="width:40%; height:400px;"></div>
</body>
</html>

JS:

var myAppModule = angular.module("myApp",[]);

myAppModule.controller('TweetCtrl',function($scope, $http){
$scope.search = function(){
    $http({
        method: 'GET',
        url: 'http://localhost:8080/search_server.php?q='   $scope.query
    }).success(function(data){
            console.log(JSON.stringify(data));
            $scope.tweets=data;
        })
        .error(function(data){
            alert("search error")
        });
 };
 $scope.delete = function (idx, $scope) {
    //var person_to_delete = $scope.tweets[idx];

    $scope.tweets.splice(idx, 1);
 };
});

myAppModule.controller('RatingCtrl', function ($scope) {
$scope.changeRating = function (rating) {
    $scope.tweet.polarity = rating;
}
});

Burada "" dizideki JSON formatı: . veri

{{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"}}

En iyi filtre ben aşağıdaki gibi gelebilir

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;
};
});

Bu yöntem boş bir dizi döndürür. Ve hiçbir şey "konsol.yazdırılır günlük(kutup)" ifadesi. Doğru parametreleri "kutup." nesne özelliği erişmek için ekleme değilim gibi görünüyor

Herhangi bir fikir? Yanıtınız takdir edilmiştir.

CEVAP

22 Temmuz 2013, PAZARTESİ

Sadece filter filtre (documentation) kullanmak zorunda :

<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

Bunu Paylaş: