更改angularjs中的ng-repeat中的单个按钮的文本

Question

是新的angularjs。

我想在成功的POST请求后更改ng-repeat内单个按钮的文本。

HTML代码

<div class="row req-content-container" ng-show="selectedTopic"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 create-immediate-meeting-list-container" align="center" ng-repeat="item in allKOL"> 
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
      <img class="profile-image-small" ng-src="{{imagesrc}}{{item.photo}}"> 
     </div> 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" valign="middle"> 
      <div class="row"><b><span class="pull-left">{{item.firstName}} {{item.lastName}}</span></b><br></div> 
      <div class="row"><b>Speciality</b><br>{{item.speciality}} </div> 
     </div> 
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
      <div class="row">&nbsp;</div> 
      <div class="row"><b>Location</b><br>{{item.city}}</div> 
     </div> 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
      <div class="row">&nbsp;</div> 
      <div class="row"><b>Convenient Hours</b><br>{{item.fromAvailable}} to {{item.toAvailable}}</div> 
     </div> 
     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
      <button type="button" class="btn margin-top-10 request-button-style" ng-click="sendRequest(item.id)">{{sendRequestButtonStatus}}</button> 
     </div> 
    </div> 
</div> 

从控制器，AM设置按钮上的文字为“发送请求”最初，我想它显示成功POST请求后，“等待请求”，但是这样做的所有按钮的文本被改为“等待请求”。我试图把它整理出来，但不能，我能得到任何帮助..

控制器

RequestAMeetingService.immediateMeetWithDoctor(payload, function (result) { 
        if(result.success) { 
         $localStorage.immediateMeetingID = result.data.data.meeting; 
         console.log($localStorage.immediateMeetingID); 
         console.log(result.data.data); 
         $scope.closeThisDialog(); 
         $scope.sendRequestButtonStatus = "Awaiting Request"; 
         AlertService.addSuccess(result.data.data.message); 
        } 
        else 
        { 
         AlertService.addError(result.data.data.err); 
        } 
       }) 

Answer 1

在这种情况下，你必须定义一个按钮阵列，与最初文本发送请求。

var buttonArray = ["Send Request"]; // array should match your ng-repeat length 

修改您的按钮，使得它发送$指数为您的成功第二argument.Then你的NG-click方法根据索引修改文本。

$scope.buttonArray[index] = "Awaiting Request"; 

这应该是你的HTML

<div class="row req-content-container" ng-show="selectedTopic"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 create-immediate-meeting-list-container" align="center" ng-repeat="item in allKOL"> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
     <img class="profile-image-small" ng-src="{{imagesrc}}{{item.photo}}"> 
    </div> 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" valign="middle"> 
     <div class="row"><b><span class="pull-left">{{item.firstName}} {{item.lastName}}</span></b><br></div> 
     <div class="row"><b>Speciality</b><br>{{item.speciality}} </div> 
    </div> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
     <div class="row">&nbsp;</div> 
     <div class="row"><b>Location</b><br>{{item.city}}</div> 
    </div> 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
     <div class="row">&nbsp;</div> 
     <div class="row"><b>Convenient Hours</b><br>{{item.fromAvailable}} to {{item.toAvailable}}</div> 
    </div> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
     <button type="button" class="btn margin-top-10 request-button-style" ng-click="sendRequest(item.id, $index)">{{ buttonArray[$index] }}</button> 
    </div> 
</div>