角 - 清除表单输入后提交

我有一个简单的形式，像这样：角 - 清除表单输入后提交

<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是于角文档中皱起了眉头 - 但有没有这样做的多棱角的方式？

来源

2013-02-04 leepowell

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

所以，如果你改变你的窗体名称为“addForm”（因为我不认为add-from是棱角分明，不知道为什么一个有效的名字），你必须$scope.addForm参考。

如果您使用angular 1.1.1或更高版本，您将在$scope.addForm上有$setPristine()方法。它应递归地处理重置您的表单。或者如果您不想使用1.1.x版本，则可以使用look at the source并对其进行仿真。

来源

2013-02-04 11:21:10

谢谢！尽管我仍然需要清除模型，但$ setPristine（）很好地处理了模糊。 'add-form'似乎可行，我可以用$ scope ['add-form']而不是点符号来访问它。 – leepowell

是的，清理模型总是必须的，因为$ setPristine不知道你的模型。谢谢你让我知道这个名字！错过了完全认为我不应该有的:) –

t = {};吨。foo-bar =“baz”; ReferenceError：分配中无效的左手边 –

对于那些不切换到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-04 16:37:13

谢谢。这很方便知道，直到1.1.1推出。 – leepowell

解决了我的问题，非常感谢。 – andygoestohollywood

我已经使它成为下面的代码。

HTML部分

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

控制器部分

e.FirstName= '';

来源

2017-12-12 12:50:03 Nimesh

角 - 清除表单输入后提交

回答

相关问题