góc - rõ ràng hình thức đầu vào sau khi nộp

Question

Tôi có một hình thức đơn giản như vậy:

<form name="add-form" data-ng-submit="addToDo()"> 
    <label for="todo-name">Add a new item:</label> 
    <input type="text" data-ng-model="toDoName" id="todo-name" name="todo-name" required> 
    <button type="submit">Add</button> 
</form> 

với bộ điều khiển của tôi như sau:

$scope.addToDo = function() { 
    if ($scope.toDoName !== "") { 
     $scope.toDos.push(createToDo($scope.toDoName)); 
    } 
} 

những gì tôi muốn làm là rõ ràng đầu vào văn bản sau khi gửi, vì vậy tôi chỉ cần xóa giá trị mô hình:

$scope.addToDo = function() { 
    if ($scope.toDoName !== "") { 
     $scope.toDos.push(createToDo($scope.toDoName)); 
     $scope.toDoName = ""; 
    } 
} 

Ngoại trừ bây giờ, vì đầu vào biểu mẫu là 'bắt buộc' Tôi có viền đỏ xung quanh t anh ta tạo thành đầu vào. Đây là hành vi đúng, nhưng không phải những gì tôi muốn trong kịch bản này ... vì vậy thay vào đó tôi muốn xóa đầu vào và sau đó làm mờ phần tử đầu vào. Dẫn tôi đến:

$scope.addToDo = function() { 
    if ($scope.toDoName !== "") { 
     $scope.toDos.push(createToDo($scope.toDoName)); 
     $scope.toDoName = ""; 
     $window.document.getElementById('todo-name').blur(); 
    } 
} 

Bây giờ, tôi biết rằng sửa đổi DOM từ bộ điều khiển như thế này không được tán thành trong tài liệu góc - nhưng là có một cách góc cạnh hơn để làm điều này?

Answer 1

Khi bạn đặt tên cho biểu mẫu, tên sẽ tự động được thêm vào số $scope. Vì vậy, nếu bạn thay đổi tên biểu mẫu thành "addForm" ('vì tôi không nghĩ rằng add-from là tên hợp lệ cho góc cạnh, không chắc chắn lý do), bạn sẽ có tham chiếu đến $scope.addForm.

Nếu bạn sử dụng góc 1.1.1 trở lên, bạn sẽ có phương thức $setPristine() trên $scope.addForm. nên đệ quy chăm sóc đặt lại biểu mẫu của bạn. hoặc nếu bạn không muốn sử dụng các phiên bản 1.1.x, bạn có thể look at the source và mô phỏng nó.

Answer 2

Đối với những người không chuyển đổi sang 1.1.1 chưa, đây là một chỉ thị đó sẽ mờ khi một $ tài sản phạm vi thay đổi:

app.directive('blur', function() { 
    return function (scope, element, attrs) { 
    scope.$watch(attrs.blur, function() { 
     element[0].blur(); 
    }); 
    }; 
}); 

Bộ điều khiển phải bây giờ thay đổi một tài sản bất cứ khi nào một trình xảy ra. Nhưng ít nhất chúng ta không làm thao tác DOM trong một bộ điều khiển, và chúng tôi không cần phải nhìn lên phần tử theo ID:

function MainCtrl($scope) { 
    $scope.toDos = []; 
    $scope.submitToggle = true; 
    $scope.addToDo = function() { 
     if ($scope.toDoName !== "") { 
      $scope.toDos.push($scope.toDoName); 
      $scope.toDoName = ""; 
      $scope.submitToggle = !$scope.submitToggle; 
     } 
    }; 
} 

HTML:

<input type="text" data-ng-model="toDoName" name="todo-name" required 
    blur="submitToggle"> 

Plnkr

Answer 3

tôi đã làm cho nó hoạt động như bên dưới mã.

HTML PHẦN

<td ng-show="a"> 
<input type="text" ng-model="e.FirstName" /> 
</td> 

điều khiển PHẦN

e.FirstName= '';