AngularJS ng:submit on 'enter' key

Question

I'm trying to create a simple form that, upon hitting the 'enter' key, the entered data will be sent and appended to a list in my controller. The code I have is as follows:

controller.js

.controller('GenericTodosCtrl', function($scope) {

    $scope.todos=[];
    $scope.newTodo="";

    function addTodo() {
        alert("hello");
        $scope.todos.push({
            content: $scope.newTodo,
            done: false,
            editing: false
        });
        $scope.newTodo = "";
    };
});

main.html

<form ng:submit="addTodo()">
    <input name="newTodo" placeholder="Placeholder" type="text">
</form>

Currently, when I type in values and hit 'enter' nothing happens (not even the alert). I can't seem to figure out if I should be using "this" instead of $scope for things in controller.js. Does ng:submit require something in the ? Or is this an issue with my javascript instead?

J.P. · Accepted Answer · 2013-07-03 20:29:31Z

4

You should make addTodo part of your $scope.

$scope.addTodo = function() {
    alert("hello");
    $scope.todos.push({
        content: $scope.newTodo,
        done: false,
        editing: false
    });
    $scope.newTodo = "";
};

Also, make sure the value in the input field is actually databound to your $scope value by using ngModel:

<form ng:submit="addTodo()">
    <input ng:model="newTodo" placeholder="Placeholder" type="text">
</form>

edited Jul 3, 2013 at 20:29

answered Jul 3, 2013 at 20:22

J.P.

5,7624 gold badges27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shawn Taylor Over a year ago

That's perfect. Just starting out with things so thanks for the clear and concise response.

J.P. Over a year ago

You're welcome. Enjoy learning AngularJS, it's fantastic stuff.

Collectives™ on Stack Overflow

AngularJS ng:submit on 'enter' key

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related