Search code examples
javascriptangularjsangularjs-scopeng-submit

Why is ng-submit not submitting and updating model


http://plnkr.co/edit/0W4ATi7loAKk94Cnj3lz?p=preview

A simple Angular app, not sure why the ng-submit isn't firing the createMeetup function

HTML

<!-- Meetups View -->
<div ng-controller="meetupsController">
    <h1>There are {{meetupsCount}} meetups</h1> 
    <ul>
        <li ng-repeat="meetup in meetups">
            {{meetup.name}}
        </li>
    </ul>
</div>

<form ng-submit="createMeetup()">
    <input ng-model="meetupName" type="text" placeholder="Meetup name"></input>
    <button type="submit">Add</button>
</form>

Controller

var app = angular.module('meetupsApp', [])

.controller('meetupsController', ['$scope', function($scope) {
    $scope.meetupsCount = 10;

    $scope.meetups = [
        { name: "MEAN SF Developers" },
        { name: "Some other meetup" },
    ]

    $scope.createMeetup = function() {
        console.log('clicked');
        $scope.meetups.push({ name: $scope.meetupName });
        $scope.meetupName = '';
    }
}]);

Solution

  • The form element is placed outside of your controller's scope.

    <!-- Meetups View -->
    <div ng-controller="meetupsController">
        <h1>There are {{meetupsCount}} meetups</h1> 
        <ul>
            <li ng-repeat="meetup in meetups">
                {{meetup.name}}
            </li>
        </ul>
        <form ng-submit="createMeetup()">
               <input ng-model="meetupName" type="text" placeholder="Meetup name"></input>
              <button type="submit">Add</button>
        </form>
    </div>