单击后动态更改按钮名称

我使用$ http.get api从数据库中检索内容，并使用ng-repeat显示每条记录。对于每个记录我有一个like and comment button.在点击像按钮，即时插入一个记录使用$ http.post，我必须change the name of button to "Liked"。问题是 - 点击任何一个记录像按钮，所有其他记录，如按钮名称更改为喜欢包括点击按钮。单击后动态更改按钮名称

<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（）脚本/控制器内部的方法是

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

我怎样才能改变只是点击按钮的名称？

来源

2016-12-23 Shashank G

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

来源

2016-12-23 11:51:15

为什么你在这里使用了dat reference {{dat.likebtnname ||'Like'}}。对象 –

没有字段名称likebtnname Didnt工作... –

我更新了答案：在'$ parent.likebtn（dat.id，loginname，dat）添加了'$ parent'' –

现在你有一个变量$scope.likebtnname，所以当你改变它，它会改变所有。
您可以使用track by $index进行ng-repeat，然后使用数组$scope.likebtnname[$index]，并且只更改需要通过$index的那个。

来源

2016-12-23 11:47:44 Olezt

u能解释更多的U上如何访问内部控制器$指数。我是否需要将它作为参数传递，同时调用一个方法将其作为$ scope.likebtnname [$ index]使用？ –

您可以在视图中执行'ng-click =“likebtn（dat.id，loginname，$ index）”''。
设置你的函数为'$ scope.likebtn = function（idvalue，namevalue，index）'
然后在函数里面'$ scope.likebtnname [index] =“喜欢”;' – Olezt

可以解释你将如何创建数组$ scope.likebtnname [index]在这种情况下？ bcz我用这个作为$ scope.likebtnname ng-model –

由于它们都具有相同的名称，所以一个解决方案可以动态更改名称。第一轨道由$指数

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

然后在你的按钮添加一个ID

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

然后通过这个ID在你的函数

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

然后使用该ID更新DOM

$scope[id]="Liked";

来源

2016-12-23 11:47:50

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

来源

2016-12-23 12:27:47

单击后动态更改按钮名称

回答

相关问题