CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeng-submit
Leon Gaban
Leon Gaban

Reputation: 39044

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 = '';
    }
}]);

Upvotes: 0

Views: 317

Answers (1)

Karthik
Karthik

Reputation: 1377

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>

Upvotes: 3

Related Questions