1

todo リストを含む Angular のメイン ページから簡単な例を実行しています。入力フィールドが空白のときにユーザーが todo を送信できないようにしたい。問題は、ページを読み込んで、最初に入力フィールド内をクリックして Enter キーを押すと、空白の todo が Todo リストに追加されることです。ただし、その後、検証は機能します。これを行う他の方法があることは知っていますが、このバグが存在する理由と修正方法を知りたいです。

以下の私の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.todoTextisであるため、条件を渡し、モデルの変数に基づいundefinedて空の string に設定されます''

するか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 に答える