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

Question

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

Sasank Sunkavalli · Accepted Answer · 2017-01-07 07:24:28Z

1

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>

edited Jan 7, 2017 at 7:24

answered Jan 7, 2017 at 7:02

Sasank Sunkavalli

3,9846 gold badges35 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raghav Over a year ago

no.. I want to show button for each record and text changes based on the each POST Successful request and if some buttons is not clicked it should remain in initial state i.e., Send Request.. Each button will call a ngclick function sending the ID of the record

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related