单击提交按钮后刷新/重新渲染 UI

Question

目前我正在使用 AnularJS 更新 JSON 文件中的值，一旦我点击提交按钮，我想清除整个 DOM 并刷新 UI 并更新内容。你能帮忙吗

此处 Value1 和 Value2 来自两个不同的函数，但有时 . Value2 将为空，只有 Value1 会出现。但在单击提交按钮后，Value2 仍将显示为旧值，而 Value1 将显示为更新后的值。

AngularJS 中是否有任何方法可以在更新值之前刷新 DOM。所以一旦我点击提交我应该只看到 Value1

var app = angular.module('myApp', ['angular-loading-bar']);

app.controller("Controller", ["$scope", "$http", "$window",
    function ($scope, $http, $window) {
      
        $scope.firstFunction = function () {
            $http({
                method: 'POST',
                url: 'one.php',
                //headers : {'Content-Type':'application/x-www-form-urlencoded'},
                data: {
                    "accountnumber": $scope.accountnumber,
                    "environment": $scope.selectedVal,
                },
            }).then(function (response) {
                var data = response.data;
                $scope.post = response.data;
                $scope.value1 = response.data
              

                //$scope.secondFunction(data);
            }, function (error) {
                var data = error.data;
                console.log("Error" + data);
            })
        }
        
        
               $scope.secondFunction = function () {
            $http({
                method: 'POST',
                url: 'two.php',
                //headers : {'Content-Type':'application/x-www-form-urlencoded'},
                data: {
                    "accountnumber": $scope.accountnumber,
                    "environment": $scope.selectedVal,
                },
            }).then(function (response) {
                var data = response.data;
                $scope.post = response.data;
                $scope.value2 = response.data
                console.log($scope.cellularIPAddressValue);

                //$scope.secondFunction(data);
            }, function (error) {
                var data = error.data;
                console.log("Error" + data);
            })
        }
   }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
  <body ng-app="myApp">

    <div ng-controller="Controller">
 <div class="row">
                    
                    <div class="input-group form-search">
                        <input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
                        <span class="input-group-btn">
                     <button type="submit" ng-click="firstFunction();secondFunction();" class="btn btn-primary">Submit</button>
                     </span>
                        <span id="message">{{value1}}</span>
                       <span id="message">{{value2}}</span>
                    </div>
                </div>
      </div>
    </body>

</html>

Answer 1

不需要刷新 UI，因为 angular 数据绑定完成了这项工作。

改变 ng-click="firstFunction();secondFunction();" ng-click="value1=null;value2=null;firstFunction();secondFunction();" 可能会有帮助。

单击提交按钮后刷新/重新渲染 UI

Refresh/ Re Render the UI once Submit button is clicked

html

javascript

page-refresh

angularjs