23

我有一个像这样的简单表格：

<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>

我的控制器如下：

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

我想做的是在提交后清除文本输入，所以我只需清除模型值：

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

除了现在，因为表单输入是“必需的”，所以表单输入周围有一个红色边框。这是正确的行为，但不是我在这种情况下想要的......所以我想清除输入然后模糊输入元素。这导致我：

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

现在，我知道像这样从控制器修改 DOM 在 Angular 文档中是不受欢迎的——但是有没有更 Angular 的方式来做到这一点？

4

3 回答 3

31

当您为表单命名时，它会自动添加到$scope.

因此，如果您将表单名称更改为“ addForm”（因为我认为这不是add-fromangular 的有效名称，不知道为什么），您将参考$scope.addForm.

如果您使用 angular 1.1.1 或更高版本，您将$setPristine()在$scope.addForm. 它应该递归地负责重置您的表单。或者如果您不想使用 1.1.x 版本，您可以查看源代码并进行仿真。

于 2013-02-04T11:21:10.470 回答
2

对于那些还没有切换到 1.1.1 的人，这里有一个指令，当 $scope 属性发生变化时会变得模糊：

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

控制器现在必须在提交发生时更改属性。但至少我们没有在控制器中进行 DOM 操作，也不必通过 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

于 2013-02-04T16:37:13.173 回答
0

我已经让它像下面的代码一样工作。

HTML部分

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

控制器部分

e.FirstName='';

于 2017-12-12T12:50:03.070 回答