角js跟蹤喜歡和不喜歡點擊

我想在angularjs開發應用程序，我在閱讀json閱讀喜歡和不喜歡按鈕的評論。我被困在點我不知道如何跟蹤用戶是否已經點擊贊評論？角js跟蹤喜歡和不喜歡點擊

data.json ::

[ { 
    "name": "Anam", 
    "age": 20, 
    "id": 100, 
    "commentline": "Yes Good !!!", 
    "like":5, 
    "dislike":1 
    }, 
    { 
    "name": "Moroni", 
    "age": 50, 
    "id": 101, 
    "commentline": "Yes Good !!!", 
    "like":5, 
    "dislike":1 
    }, 
    { 
    "name": "Tiancum", 
    "age": 43, 
    "id": 102, 
    "commentline": "Yes Good !!!", 
    "like":5, 
    "dislike":1 
    }, 
    { 
    "name": "Jacob", 
    "age": 27, 
    "id": 103, 
    "commentline": "Yes Good !!!", 
    "like":5, 
    "dislike":1 
    }, 
    { 
    "name": "Nephi", 
    "age": 29, 
    "id": 104, 
    "commentline": "Yes Good !!!", 
    "like":5, 
    "dislike":1 
    }, 
    { 
    "name": "Anam", 
    "age": 20, 
    "id": 100, 
    "commentline": "Yes Good !!!", 
    "like":5, 
    "dislike":1 
    } 
]

HTML ::

<!DOCTYPE html> 
<html ng-app="FundooDirectiveTutorial"> 
<head> 
    <title>Rating Directive Demo</title> 
    <link rel="stylesheet" href="rating.css"/> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
    <style> 
    .sideheading 
    { 
    display: inline-block 
    } 
</style> 
</head> 
<body ng-controller="FundooCtrl"> 


    <h2>Listing All Comments </h2> 
    <br/><!-- 
    <div class="commentbox" ng-repeat="comment in comments" > 
    <h4 class="sideheading">comment By:</h4>{{comment.name}}<br/> 
    <h4 class="sideheading">Comment ::</h4>{{comment.commentline}} <br/> 
    <h4 class="sideheading">Likes ::</h4> {{comment.like}} <br/> 
    <h4 class="sideheading">Dislike::</h4> {{comment.dislike}} <br/> 

    </div> 
--> 
    <div class="panel panel-default" ng-repeat="comment in comments"> 
      <div class="panel-heading"> 
      <h3 class="panel-title">{{comment.name}}</h3> 
      </div> 
      <div class="panel-body"> 
      Comment ::{{comment.commentline}} <br/> 
      Likes :: {{comment.like}} 
      <button type="button" class="btn btn-default btn-xs" ng-click="incrlikes(comment)"> 
      <span class="glyphicon glyphicon-star"></span> Like 
      </button> 
      <button type="button" class="btn btn-default btn-xs" ng-click="decrlikes(comment)"> 
      <span class="glyphicon glyphicon-star"></span> DisLike 
      </button><br/> 
      Dislike:: {{comment.dislike}} 
      <br/> 
      likeflag:: 
      <br/> 

      </div> 
    </div> 
    <!-- <div fundoo-rating rating-value="rating" max="10" on-rating-selected="saveRatingToServer(rating)"></div> 
    <br/> 
    Readonly rating <br/> 
    <div fundoo-rating rating-value="rating" max="10" readonly="true"></div> 
--> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
    <script type="text/javascript" src="comment.js"></script> 
</body> 
</html>

JS ::

var app=angular.module('FundooDirectiveTutorial', []); 



app.controller('FundooCtrl', function ($scope, $http) { 
    $http.get('comment.json').success(function(data) { 
    $scope.comments = data; 
    $scope.incrlikes=function(a) 
    { 
      var selectedIndex=$scope.comments.indexOf(a); 
      console.log('Likes increment'+a.name); 
      console.log($scope.comments.indexOf(a) +'with index of name is '+$scope.comments[selectedIndex].name ); 
      $scope.comments[selectedIndex].like=$scope.comments[selectedIndex].like+1; 
      $scope.likeflag=1; 

    if($scope.likeflag==1) 
    {  

      }else 
      { 
      console.log('Already like'); 
      } 
    } 
    }); 

});

小提琴::

http://jsfiddle.net/simmi_simmi987/DeKP4/

來源

2014-04-22 anam

@Stpal與每一個JSON對象？我在哪裏卡住了，爲每個評論，這是我怎麼可以跟蹤 – anam

你想幹什麼？每個評論/每個用戶？ – Satpal

every user ..我想跟蹤每個用戶 – anam

我解決我用NG-展示和NG-隱藏這個問題，

時likeClicked是假的話，我喜歡顯示按鈕，當用戶點擊就可以了我的變化變量爲false。所以automaticaly，不喜歡按鈕顯示

var app=angular.module('FundooDirectiveTutorial', []); 



app.controller('FundooCtrl', function ($scope, $http) { 
    $http.get('comment.json').success(function(data) { 
    $scope.comments = data; 
    $scope.likeClicked=[]; 
    $scope.incrlikes=function(a) 
    { 
      var selectedIndex=$scope.comments.indexOf(a); 

      if(! $scope.likeClicked[selectedIndex]) 
      { 
      console.log('Likes increment'+a.name); 
      console.log($scope.comments.indexOf(a) +'with index of name is '+$scope.comments[selectedIndex].name ); 
      $scope.comments[selectedIndex].like=$scope.comments[selectedIndex].like+1; 
      $scope.likeClicked[selectedIndex]=true; 
      } 
      else 
      { 
      console.log('Already like'); 
      } 
    } 

    $scope.decrlikes=function(a) 
    { 
      var selectedIndex=$scope.comments.indexOf(a); 

      if($scope.likeClicked[selectedIndex]) 
      { 
      console.log('Likes increment'+a.name); 
      console.log($scope.comments.indexOf(a) +'with index of name is '+$scope.comments[selectedIndex].name ); 
      $scope.comments[selectedIndex].like=$scope.comments[selectedIndex].like-1; 
      $scope.likeClicked[selectedIndex]=false; 
      } 
      else 
      { 
      console.log('Already Dislike'); 
      } 
    } 
    }); 

});

來源

2014-04-22 13:07:08 anam

角js跟蹤喜歡和不喜歡點擊

回答

相關問題