Javascript angular js跟踪喜欢和不喜欢的点击

Javascript angular js跟踪喜欢和不喜欢的点击,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我正在尝试在angularjs中开发应用程序,在这里我阅读json来阅读带有“喜欢”和“不喜欢”按钮的评论。我被困在一个点上,我不知道如何跟踪用户是否已经点击了Like以获得特定评论?? data.json:: [ { "name": "Anam", "age": 20, "id": 100, "commentline": "Yes Good !!!", "like":5, "dislike":1 }, { "name": "Mo

我正在尝试在angularjs中开发应用程序,在这里我阅读json来阅读带有“喜欢”和“不喜欢”按钮的评论。我被困在一个点上,我不知道如何跟踪用户是否已经点击了Like以获得特定评论??

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

});
小提琴::


我使用ng show和ng hide解决了这个问题

当likeClicked为false时,我显示like按钮,当用户单击它时,我将变量更改为false。因此,自动显示“不喜欢”按钮

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

});

@每一个json对象的Stpal?这就是我被卡住的地方,对于每一条评论,我如何跟踪你想要什么?每个评论/每个用户?每个用户..我想跟踪每个用户然后你必须存储喜欢/取消链接的用户comment@Satpal看看假设我打开浏览器并喜欢“Jacob”的评论,那么它对应的喜欢应该增加1,然后再次点击喜欢,它应该显示一些消息,比如“已经喜欢什么了”