单击“提交”按钮后,刷新/重新呈现UI

时间:2016-12-07 15:37:45

标签: javascript html angularjs page-refresh

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

这里Value1和Value2来自两个不同的功能,但有时候。 Value2将为null,仅存在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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

无需刷新UI,因为角度数据绑定可以完成工作。

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