Je suis en train de créer un filtre personnalisé dans AngularJS qui permettra de filtrer une liste d'objets par les valeurs d'une propriété spécifique. Dans ce cas, je veux filtrer par la "polarité" propriété valeurs possibles de "Positif", "Neutre", "Négatif").
Voici mon code de travail, sans le filtre:
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;
}
});
Voici les "données" tableau au format 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"}}
Le meilleur filtre que je pouvais venir comme suit:
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;
};
});
Cette méthode renvoie un tableau vide. Et rien n'est imprimé à partir de la console.log(polarité)". Il me semble que je ne suis pas d'insérer les paramètres corrects pour accéder à la propriété de l'objet de la "polarité."
Des idées? Votre réponse est très apprécié.
