在 Angular 中执行操作后重置表单控件

Question

this 需要一些帮助。在调用添加控件后，我试图让 Angular 重置我的输入框的值。在下拉 select 个框时，这很重要。在将选项推送到集合后，我希望能够清除用户 select 编辑的内容。

我似乎也对 user.fName 更新我之前添加到 users 数组的任何内容有疑问，但这可能与上述内容有关。

你还能看到我在 ng-show 上做错了什么吗？

html

<div ng-controller="UserController" name="form">
  <div ng-show="form.fName.$touched">Hello {{ user.fName }}</div>
  <input type="text" name="fName" ng-model="user.fName">
  <a ng-click="addUser(user)">Add</a>
    <br>
  <div ng-repeat="user in users">{{ user }}</div>
</div>

javascript

function UserController($scope) {
  //$scope.user = {
  //    fName: "Joe",
  //    lName: "Doe"
  //};
  $scope.users = [];
  $scope.addUser = function (user) {
    if($scope.users.indexOf(user) === -1){
      $scope.users.push(user);
    } else {
      // trigger error/notification message
      console.log(user, ' already added');
    }
    user = {}; //clear user
  };
}

Answer 1

ngModel 将尝试绑定到属性通过评估当前范围内的表达式给出的值。如果属性在此作用域中尚不存在，它将被隐式创建并添加到作用域中。

您目前没有在点击操作中使用范围属性，而是使用作为参数传递的副本。在您的 addUser 方法中将 user 更改为 $scope.user

注意：用于识别已添加用户的对象比较将不起作用，因为您总是创建永远不会匹配的新对象。将其更改为一些不同的比较方法，例如比较 fName 属性。

html

<div ng-controller="UserController" name="form">
  <div ng-show="form.fName.$touched">Hello {{ user.fName }}</div>
  <input type="text" name="fName" ng-model="user.fName">
  <a ng-click="addUser()">Add</a>
    <br>
  <div ng-repeat="user in users">{{ user }}</div>
</div>

javascript

function UserController($scope) {
    $scope.users = [];
    $scope.addUser = function () {
        if($scope.users.indexOf($scope.user) === -1){
          $scope.users.push($scope.user);
        } else {
          // will never match as indexOf() will always return -1
          console.log($scope.user, ' already added');
        }
        $scope.user = {}; //clear user
    };
}

http://plnkr.co/edit/N5FXJdWRl42YrVwJsUuR?p=preview

至于你的 ng-show 问题：$touched 是在 AngularJS 1.3 中引入的，你在你的 Plunker 代码中引用了 AngularJS 1.2.x。

在 Angular 中执行操作后重置表单控件

Resetting form controls after action in Angular

forms

data-binding

angularjs