單擊後動態更改按鈕名稱

我使用$ 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

單擊後動態更改按鈕名稱

回答

相關問題