Question

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

我似乎也遇到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将尝试通过评估当前范围上的表达式绑定到给定的属性。如果该范围内的属性尚未存在，则将隐式创建该属性并将其添加到范围中。

您当前未在点击操作中使用作用域属性，而是作为参数传递的副本。在user方法

中将$scope.user更改为addUser

注意：用于识别已添加用户的对象比较不会起作用，因为您始终会创建永远不会匹配的新对象。将其更改为某种不同的比较方法，例如比较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问题：在AngularJS 1.3中引入了$ touch，你在Plunker代码中引用了AngularJS 1.2.x.

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

1 个答案: