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