CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Raghav
Raghav

Reputation: 1229

Changing the text of single Button within ng-repeat in angularjs

am new to angularjs.

I want to change the text of single button within ng-repeat after successful POST request.

html code

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

From controller, am setting the button text to "Send Request" initially and i want it to show "awaiting Request" after successful POST request, but doing this all the buttons text are changing to "awaiting Request". I tried to sort it out but couldn't, can i get any help..

Controller

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

Upvotes: 0

Views: 281

Answers (1)

Sasank Sunkavalli
Sasank Sunkavalli

Reputation: 3964

In that case , you have to define a buttons array , with the initial text as Send Request. 

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

Modify your ng-click method of your button such that it sends $index as the second argument.Then in your success modify the text according to index.

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

This should be your 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>

Upvotes: 1

Related Questions