角 - 清除表單輸入後提交

我有一個簡單的形式，像這樣：角 - 清除表單輸入後提交

<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

角 - 清除表單輸入後提交

回答

相關問題