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。

したがって、フォーム名を " " に変更すると(理由は不明ですが、angular の有効な名前ではaddFormないと思います)、 への参照が作成されます。add-from$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">

プランク

于 2013-02-04T16:37:13.173 に答える