Question

我想知道控制器功能中$scope.reset();的目的是什么？重置似乎没有这个代码也可以工作，但文档说要使用这个代码，我无法理解为什么：

 <body ng-app="myapp" ng-controller="resetController">
    <label>Enter name</label><input type="text" ng-model="name"/>
    <label>Enter emailid</label><input type="text" ng-model="email"/>
    <button ng-click="reset()">Reset</button>
    <script>
        angular.module("myapp",[])
        .controller("resetController", function($scope)
        {
            $scope.reset = function()
            {
                $scope.name = "";
                $scope.email = "";
            }
            $scope.reset(); /* not sure why we need this */
        });
    </script>
</body>

Answer 1

<body ng-app="myapp" ng-controller="resetController">
        <label>Enter name</label><input type="text" ng-model="name"/>
        <label>Enter emailid</label><input type="text" ng-model="email"/>
        <button ng-click="reset()">Reset</button>
    <script>
        angular.module("myapp",[])
        .controller("resetController", function($scope)
        {
            $scope.reset = function()
            {
                $scope.name = "";
                $scope.email = "";
            }
            $scope.reset(); /* not sure why we need this */
        });
    </script>
</body>

这是你的代码。现在看，你有ng-click="reset()"。这是在控制器内调用$ scope.reset方法，因此字段被清除。

如您所知：$scope.reset(); / *不确定为什么我们需要这个* /

不，你不需要这个，除非你没有从你的视图中调用这个方法。当你需要在页面加载事件上调用方法时，在控制器内部使用$scope.reset()。

*我认为$scope.reset()可用于在第一次加载页面时清除字段。

Answer 2

你问/* not sure why we need this */

 $scope.reset = function(){
            $scope.name = "";
            $scope.email = "";
 }
 $scope.reset(); /* not sure why we need this */

实际上它在第一次实例化控制器时调用函数reset()，所以在你有时间对两个输入进行任何思考之前。最好在使用它们之前声明字段，以避免控制器端出现“未定义”错误。在这种特殊情况下，它只会改变，但在示例中他们可以做更多其他事情。

您可以尝试在函数内部发出警报，它应该在第一次运行时调用它，并且每次单击reset（）

 $scope.reset = function(){
            alert("call to reset");
            $scope.name = "";
            $scope.email = "";
 }

Answer 3

试试这种方式

<body ng-app="myapp" ng-controller="resetController">
<label>Enter name</label><input type="text" ng-model="fromData.name"/>
<label>Enter emailid</label><input type="text" ng-model="fromData.email"/>
<button ng-click="reset()">Reset</button>
<script>
    angular.module("myapp",[])
    .controller("resetController", function($scope)
    {
        $scope.fromData = [];


        $scope.reset = function()
        {
            $scope.fromData = [];
        }
    });
</script>

Angular js中的重置按钮实现

3 个答案: