1

我正在 Angular 的主页上运行一个简单的示例，其中涉及一个待办事项列表。我想阻止用户在输入字段为空白时提交待办事项。问题是当我加载页面时，我要做的第一件事是在输入字段内单击并按 Enter，然后将空白待办事项添加到待办事项列表中。但是，之后验证工作。我知道还有其他方法可以做到这一点，但我想知道为什么存在这个错误以及如何修复它。

我的html下面

<form ng-submit="addTodo()">
  <input ng-model="todoText" placeholder="Add a todo here" type="text" />
  <input class="button" type="submit" value="add">
</form>

我的.js文件

$scope.addTodo = function() {
  var text = $scope.todoText;
  if (text != "") {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  }
};
4

2 回答 2

2

$scope.todoText是undefined，所以它通过你的条件，然后设置为空字符串''，基于你的模型的变量

要么做if (!$scope.todoText) {，要么将其初始化为空字符串$scope.todoText = '';

在控制器中：

$scope.todoText = '';

$scope.addTodo = function() {
  if ($scope.todoText != "") {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  }
};
于 2012-12-28T02:47:08.307 回答
0

您是否尝试过required在输入中使用该属性？

<input type="text"
       ng-model="todoText"
       required <------------- prevents submission and marks the view as invalid
       size="30"
       placeholder="add new todo here" />

试试http://jsfiddle.net/hbulhoes/uBXfN/

于 2012-12-28T11:10:16.153 回答