javascript - 单击“提交”按钮后刷新/重新渲染 UI

标签 javascript html angularjs page-refresh

目前我正在使用 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>

最佳答案

无需刷新 UI,因为 Angular 数据绑定(bind)即可完成这项工作。

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

关于javascript - 单击“提交”按钮后刷新/重新渲染 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41021501/

相关文章:

javascript - NextJs <Link> 不会触发 beforeunload 事件。尝试在离开页面之前提示用户

javascript - 正则表达式接受正数和负数

javascript - 如何删除使用按钮创建的内容

javascript - 具有不同参数的 eventEmitter 监听器和发射器

javascript - 使用 Ramda 将 id 数组映射到具有这些 id 的对象

html - 如何自定义 bootstrap 下拉列表?

javascript - 如何使用 event.target 获取外部 div 目标?

javascript - AngularJS $cookies.get() 总是返回 undefined

javascript - 在nodejs服务器上解析formdata请求

node.js - 如何在angular js中访问本地ENV变量