2017-01-07 4 views
0

はangularjsに新たに追加されました。angularjsのng-repeat内の単一のボタンのテキストを変更する

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> 

、されている最初は「リクエストを送信」ボタンのテキストを設定し、私はそれが成功したPOSTリクエストの後に「待っRequest」を表示したいが、このすべてのボタンのテキストをしています「要求待ち」に変更されます。私はそれを整理しようとしたができなかった、私は任意の助けを得ることができます。..その場合

コントローラ

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

答えて

1

、あなたがリクエストを送るように最初のテキストと、ボタンの配列を定義する必要があります。

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

は、インデックスに応じてテキストを変更し、それはあなたの成功における第二argument.Thenとして$インデックスを送信するように、あなたのボタンのごNGクリック方式を変更します。これは

<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> 

+0

はありません..私は、各POST成功した要求に基づいて、各レコードとテキストの変更のためのボタンを表示したいあなたのhtmlである必要があり、いくつかのボタンがクリックされていない場合

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

それは初期状態、すなわちSend Request ..のままでなければなりません。各ボタンはngclick関数を呼び出してレコードのIDを送信します – Raghav

+0

お返事ありがとうございます.. – Raghav

関連する問題