使用ng-model时控制器的Angular JS清空表单输入字段

詹姆斯·G

我有一个非常简单的表单,其中包含几个输入字段。这是一个:

            <label class="item item-input item-stacked-label">
                <span class="input-label">First Name</span>
                <input type="text" ng-model="signInData.firstName" placeholder="">
            </label>

当我提交表单并且它从AJAX请求返回true时,我只想清空输入字段,但是它不起作用。我可能缺少一些简单的方法。

这是我要清空的控制器代码:

        $scope.signInData.firstName = '';

这是从范围中清空模型,我可以看到这是因为我正在控制台上记录范围对象,但是它并没有清空值。

我已经用Google搜索了一段时间,并看到了诸如$ setPristine方法之类的东西,但是这些都不起作用。

编辑

    $http({
      url: 'sign_in_app',
      method: 'POST',
      data: {'firstName': signInData.firstName}
    }).then(function(response) {
      if(response.data.response == 'error'){
        $scope.errorSignIn = 'Sorry, there was an error signing in.';
      }else{
        $scope.errorSignIn = null;
        $scope.signInData.firstName = '';
        $scope.signInForm = null;
      }
    }

编辑-表格

    <form ng-submit="signIn(signInData)" id="signInForm" name="signInForm">
        <div ng-bind-html="errorSignIn" class="center error"></div>
        <div class="list">
            <label class="item item-input item-stacked-label">
                <span class="input-label">First Name</span>
                <input type="text" ng-model="signInData.firstName" placeholder="">
            </label>

            <label class="item">
              <button class="button button-full button" type="submit">Sign in</button>
            </label>
         </div>
     </form>

编辑3-更新的HTTP调用

    $http({
      url: '/sign_in/sign_in_app',
      method: 'POST',
      data: {'firstName': $scope.signInData.firstName, 'lastName': $scope.signInData.lastName}
    }).then(function(response) {
      if(response.data.response == 'error'){
        $scope.errorSignIn = 'Sorry, there was an error signing in.';
      }else{
        $scope.errorSignIn = null;
        $scope.signInData.firstName = '';
        $scope.signInForm = null;
      }

    }
莱克斯

尝试以下操作:signInData从中删除ng-submit,更改您的$scope.signIn()方法以使其不再需要,使用该$scope.signInData对象来设置您的$http调用的所有值(顺便说一句,该值可能应该在服务中,以使您的控制器更加整洁并遵循常规角度设计模式),然后查看是否仍然存在无法清除表单输入的问题。

我的怀疑是,因为从那时signInData起您就开始对作用域对象的副本进行操作,因此,清除属性的行为不像您期望的那样。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

angular js-不使用ng-model从控制器为动态生成的文本框分配值

来自分类Dev

Angular-ui模式控制器中的ng-model输入未定义

来自分类Dev

无法从控制器中的输入访问 ng-model

来自分类Dev

使用服务时控制器中的Angular.js方法重复

来自分类Dev

使用ajax提交表单时,无法从视图中获取控制器中的字段数据

来自分类Dev

使用ajax提交表单时,无法从视图中获取控制器中的字段数据

来自分类Dev

使用vm作为控制器时如何设置输入字段的初始值?

来自分类Dev

从控制器渲染js时使用Rails Sprockets指令

来自分类Dev

从控制器渲染js时使用Rails Sprockets指令

来自分类Dev

通过javascript动态设置时,在angularjs控制器中未定义输入文本框的ng-model值

来自分类Dev

通过javascript动态设置时,在angularjs控制器中未定义输入文本框的ng-model值

来自分类Dev

当初始化时超过ng-maxlength时,为什么angularjs会清空输入字段?

来自分类Dev

如何使用Angular JS在控制器中定义函数

来自分类Dev

在此示例中,Angular js使用控制器

来自分类Dev

使用angular js控制器检查cookie并返回模态

来自分类Dev

如何在angular js控制器中使用alasql?

来自分类Dev

清空Angular中的输入字段

来自分类Dev

AngularJS在控制器功能中选择输入ng-model访问

来自分类Dev

在嵌套的Angularjs控制器中使用ng-model

来自分类Dev

从一个控制器设置为要在另一个控制器上使用的服务的值在使用 angular js 的页面刷新时不返回任何值(新到 angular)

来自分类Dev

使用angular js根据下拉列表中的选定输入隐藏表单中的字段

来自分类Dev

从另一个角度js控制器更新一个角度js控制器的ng-model

来自分类Dev

Angular JS使用ng-model获取日期输入的值

来自分类Dev

Angular js:从控制器访问以ng-repeat(ngRepeat)过滤的数据

来自分类Dev

Angular js:从控制器访问以ng-repeat(ngRepeat)过滤的数据

来自分类Dev

使用ng-model时清空占位符

来自分类Dev

跨控制器共享ng-repeat表单字段的数据

来自分类Dev

使用ng-repeat动态添加字段时提交的表单

来自分类Dev

使用控制器方法提交表单

Related 相关文章

  1. 1

    angular js-不使用ng-model从控制器为动态生成的文本框分配值

  2. 2

    Angular-ui模式控制器中的ng-model输入未定义

  3. 3

    无法从控制器中的输入访问 ng-model

  4. 4

    使用服务时控制器中的Angular.js方法重复

  5. 5

    使用ajax提交表单时,无法从视图中获取控制器中的字段数据

  6. 6

    使用ajax提交表单时,无法从视图中获取控制器中的字段数据

  7. 7

    使用vm作为控制器时如何设置输入字段的初始值?

  8. 8

    从控制器渲染js时使用Rails Sprockets指令

  9. 9

    从控制器渲染js时使用Rails Sprockets指令

  10. 10

    通过javascript动态设置时,在angularjs控制器中未定义输入文本框的ng-model值

  11. 11

    通过javascript动态设置时,在angularjs控制器中未定义输入文本框的ng-model值

  12. 12

    当初始化时超过ng-maxlength时,为什么angularjs会清空输入字段?

  13. 13

    如何使用Angular JS在控制器中定义函数

  14. 14

    在此示例中,Angular js使用控制器

  15. 15

    使用angular js控制器检查cookie并返回模态

  16. 16

    如何在angular js控制器中使用alasql?

  17. 17

    清空Angular中的输入字段

  18. 18

    AngularJS在控制器功能中选择输入ng-model访问

  19. 19

    在嵌套的Angularjs控制器中使用ng-model

  20. 20

    从一个控制器设置为要在另一个控制器上使用的服务的值在使用 angular js 的页面刷新时不返回任何值(新到 angular)

  21. 21

    使用angular js根据下拉列表中的选定输入隐藏表单中的字段

  22. 22

    从另一个角度js控制器更新一个角度js控制器的ng-model

  23. 23

    Angular JS使用ng-model获取日期输入的值

  24. 24

    Angular js:从控制器访问以ng-repeat(ngRepeat)过滤的数据

  25. 25

    Angular js:从控制器访问以ng-repeat(ngRepeat)过滤的数据

  26. 26

    使用ng-model时清空占位符

  27. 27

    跨控制器共享ng-repeat表单字段的数据

  28. 28

    使用ng-repeat动态添加字段时提交的表单

  29. 29

    使用控制器方法提交表单

热门标签

归档