Сброс формы управления после действия в Угловом

Question

Нужна помощь с this. Я пытаюсь заставить Angular сбросить значение моего поля ввода после вызова add control. Это важно, когда дело касается выпадающих прямоугольников. Я хочу, чтобы убрать, что пользователь выбрал после того, как опция была нажата в коллекцию.

У меня также возникла проблема с 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 будет пытаться привязать к свойству данного путем оценки экспрессии на текущей области. Если свойство еще не существует в этой области, оно будет создано неявно и добавлено в область.

В настоящее время вы не используете свойство scoped в действии click, а копию, передаваемую как параметр. Изменить 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

Как для нг-шоу вопрос: $ прикасались был введен в AngularJS 1,3 и вы ссылки AngularJS 1.2.x в ваш код Плункер.