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>

从控制器，我最初将按钮文本设置为“发送请求”，我希望它在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

修改按钮的ng-click方法，使其发送 $ index 作为第二个参数。然后在成功时根据索引修改文本。

$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内的单个按钮的文本

1 个答案: