单击按钮angularjs刷新div

Question

我正在尝试在成功时加载 div 内容，而不是在返回 $http 服务时刷新整个页面，如下所示

单击表单中的保存按钮时，它应该更新我的 div #dashBoardContents 我做错了什么？

HTML 单击表单中的保存按钮时，它应该更新我的 div #dashBoardContents li

    <div class="modified-list block-list col-sm-12" id="dashBoardContents" ng-init="getDashBoardDatatoPopulate()">
        <p class="text-center" ng-hide="dashBoardDataLoaded">
            <i class="fa fa-spinner fa-spin"> </i>
        </p>
        <p class="redirection-head" ng-if="dashboardDataCount!=0 && dashBoardDataLoaded">Your last {{dashboardDataCount}} modified</p>
        <p class="redirection-head" ng-if="dashboardDataCount==0">There is no modification by you recently</p>
        <ul class="redirection-list clearfix" >
            <li class="redirection clearfix" ng-show="dashBoardDataLoaded" ng-repeat="list in getDashBoardData" ng-click="ResetOnClose();GetEditFormData(list.fromUrl,list.Markets);getRequest();ShowEditRedirect($event);">
                <a href="">
                    <div class="redirection-url col-md-6 col-sm-6">
                        <div class="from-url">
                            <span title={{list.fromUrl}}>{{list.fromUrl}}</span>
                        </div>
                        <div class="to-url">
                            <span title={{list.toUrl}}>{{list.toUrl}}</span>
                        </div>
                        <div class="redirection-status-list clearfix">
                            <div ng-class="{active: list.redirectionStatusQA ==='Enabled','out-of-sync': list.redirectionStatusQA ==='Disabled'}" class="redirection-status status-qa ">
                                <span>QA</span>
                                <span>{{list.redirectionStatusQA}}</span>
                            </div>
                            <div ng-class="{active: list.Published ==='Yes',inactive: list.Published ==='No'}" class="redirection-status status-qa">
                                <span>Published</span>
                                <span>{{list.Published}}</span>
                            </div>
                            <div ng-class="{active: list.redirectionStatusLive ==='Enabled',inactive: list.redirectionStatusLive ==='Disabled',disabled: list.redirectionStatusLive ==='NotLive'}" class="redirection-status status-qa">
                                <span>Live</span>
                                <span>{{list.redirectionStatusLive}}</span>
                            </div>
                            <div class="redirection-status status-live pull-right" ng-hide="true">
                                <div class="redirection-status-Stats">Stats</div>
                            </div>
                        </div>
                    </div>
                    <div class="redirection-details col-md-6 col-sm-6">
                        <ul>
                            <li class="clearfix">
                                <span>Markets</span>
                                <div class="redirection-detailsDiv">
                                    <span style="float:right" ng-repeat="market in list.Markets">{{market}}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <form name="form" novalidate>
        <div class="redirection-edit redirection-editD col-sm-6 stickem">
            <div class="redirection-edit-form">
                <div class="redirection-edit-header">
                    <button type="button" id="modifyButton" class="btn btn-default create" ng-click="Submitted=true && SendData(formData,redirectionType,false);">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

Controller.js

 $scope.SendData = function (Data, redirection_type, IsPublish) {

           $http({
                url: $rootScope.host + "/TeleportWebApi/api/Edit/UpdateRedirects",
                dataType: 'json',
                method: 'PUT',
                data: GetAll,
                headers: {
                    "Content-Type": "application/json"
                }
            }).then(function (response) {
                alert("Modified Succesfully!");
                $scope.isEditable = false;
                $scope.modifiedSuccess = response.data;
                $scope.fromUrl = GetAll.DestinationURL;
                $('#dashBoardContents').load(location.href + ' #dashBoardContents');
                $scope.getDashBoardDatatoPopulate();
            })
             .catch(function (response) {
                window.alert("Modification Unsuccessful!");
                   // window.location.reload(true);
                console.error("Failed to Modify Data " + response.status + response.statusText);
             })
    }

Answer 1

$scope.getDashBoardDatatoPopulate (); 范围内有返回数据？

我认为你不需要使用 JQuery 来刷新你的数据，推入 array() 会像这样刷新你的数据：

$scope.getDashBoardData = [];
$scoppe.getData = {
  data: {},
  success: false 
};

$scope.SendData = function (Data, redirection_type, IsPublish) {

       $http({
            url: $rootScope.host + "/TeleportWebApi/api/Edit/UpdateRedirects",
            dataType: 'json',
            method: 'PUT',
            data: GetAll,
            headers: {
                "Content-Type": "application/json"
            }
        }).then(function (response) {
            alert("Modified Succesfully!");
            $scope.isEditable = false;
            if (response.data) {
              $scope.getData.data = response.data;
              $scope.getData.success = true;
            }
            $scope.getDashBoardData.push({$scope.getData.data});
            $scope.modifiedSuccess = response.data;
            $scope.fromUrl = GetAll.DestinationURL;
            $scope.getDashBoardDatatoPopulate();
        })
         .catch(function (response) {
            window.alert("Modification Unsuccessful!");
               // window.location.reload(true);
            console.error("Failed to Modify Data " + response.status + response.statusText);
         })
}

Answer 2

您可以在成功时使用ng-show 或ng-if：

https://docs.angularjs.org/api/ng/directive/ngShow

https://docs.angularjs.org/api/ng/directive/ngIf

$scope.success = false;

$http(...)
.then(function (response) {
if (response) {
  $scope.success = true;
}
  alert("Modified Succesfully!");
};

---

<div id="dashBoardContents" ng-show="success"> </div>