在 angularjs 的 ng-repeat 中更改单个 Button 的文本

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>

从控制器开始，我将按钮文本设置为 "Send Request"，我希望它在 POST 请求成功后显示 "awaiting Request"，但这样做所有按钮文本都变为"awaiting 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);
                    }
                })

Answer 1

在这种情况下，您必须定义一个按钮数组，初始文本为“发送请求”。

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

修改按钮的 ng-click 方法，使其发送 $index 作为成功的第二个 argument.Then 根据索引修改文本。

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

在 angularjs 的 ng-repeat 中更改单个 Button 的文本

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

angularjs

ng-repeat