CODEWITHSUNDEEP
angularjs
Shashank G
Shashank G

Reputation: 992

Dynamically changing the name on button after click

I have retrieving the contents from database using $http.get api and displaying each record using ng-repeat. For each record i have a like and comment button. On clicking on like button, i m inserting a record using $http.post and i have to change the name of button to "Liked".The problem is- on clicking any one of the record like button, all other records like button name changes to Liked including clicked button.

 <div ng-repeat="dat in details | filter : { product_name : textname} as results">          
        <p style="color:#4C97C8;" class="lead"><strong>{{dat.summary}}</strong></p>
        <ul>
          <li><b>Product:</b><span> {{dat.product_name}}</span></li>
          <li><b>Product Manager:</b><span> {{dat.first_name}} {{dat.last_name}}</span></li>
          <li><b>Description:</b><span> {{dat.description}}</span></li>
        </ul>
        <button style="background-color:#4C97C8;color:white;height:30px" class="btn buttonlike" ng-click="likebtn(dat.id,loginname)"><span class="glyphicon glyphicon-hand-right"></span><strong> {{ likebtnname }}</strong></button>   
        <button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-disabled="comment" ng-click="comment=true"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>
        <div class="input-group " ng-show="comment">
            <input type="text" id="commentarea" name="commentarea" class="form-control" placeholder="comment" aria-describedby="basic-addon2" ng-model="takecomment">
            <span class="input-group-addon" id="basic-addon2" ng-click="takecomment=mycomment(dat.id,takecomment)"><span class="glyphicon glyphicon-send"></span></span>
        </div>
</div>

likebtn() method inside script/controller is

$scope.likebtnname="Like";
$scope.likebtn = function(idvalue,namevalue) {

  var likereque = {
    method: 'POST',
    url: "https://url/Likes",
    headers: {
         "Content-Type": "application/json"
    },
    data: {
      "platform": {
       "record": { "idea_record": idvalue,
                   "liker": $scope.loginname
                 }
                 }
          }
  }
  $http(likereque).then(function(){
       alert("Liked Successfully");
       $scope.likebtnname="Liked"; },
     function(){alert("try again");});
  }

How can i change the name of clicked button only?

Upvotes: 0

Views: 206

Answers (4)

Slava Utesinov
Slava Utesinov

Reputation: 13488

HTML:

<button style="background-color:#4C97C8;color:white;height:30px" class="btn buttonlike" ng-click="$parent.likebtn(dat.id,loginname, dat)"><span class="glyphicon glyphicon-hand-right"></span><strong> {{ dat.likebtnname||'Like' }}</strong></button>

Javascript:

$scope.likebtn = function(idvalue,namevalue,dat) {

  var likereque = {
    method: 'POST',
    url: "https://url/Likes",
    headers: {
         "Content-Type": "application/json"
    },
    data: {
      "platform": {
       "record": { "idea_record": idvalue,
                   "liker": $scope.loginname
                 }
                 }
          }
  }
  $http(likereque).then(function(){
       alert("Liked Successfully");
       dat.likebtnname="Liked"; },
     function(){alert("try again");});
  }

Upvotes: 1

John williams
John williams

Reputation: 731

 $http(likereque).then(function successCallback(){
      alert("Liked Successfully");
      dat.likebtnname="Liked"; 
   },
   errorCallback function(){
      alert("try again");
    });
 }

Upvotes: 0

Vikash Kumar
Vikash Kumar

Reputation: 1718

Since they all have same name to it is a common occurrence so one solution canbe dynamically changing the name. First track by $index

div ng-repeat="dat in details track by $index| filter : { product_name : textname} as results">

Then in your button add an ID

 <button style="background-color:#4C97C8; ng-model="$index"

Then pass that id in your function

 ng-click="likebtn(dat.id,loginname,$index)"

then by using that id update dom

$scope[id]="Liked";

Upvotes: 0

Olezt
Olezt

Reputation: 1738

Right now you have one variable $scope.likebtnname, so when you change it, it changes for all.
You can use track by $index for the ng-repeat, then use an array $scope.likebtnname[$index] and change only the one you need passing the $index.

Upvotes: 0

Related Questions