Ng-Submit не sumbit form

Я пытаюсь вызвать функцию на ng-submit для нажатия на массив, если я консоль регистрирую функцию, которая явно работает только на событии кнопки, ng-submit не вызван. Я занимаюсь этим вопросом далеко недолго. Я создал код для проблемы.Ng-Submit не sumbit form

http://codepen.io/anon/pen/emVGNb

<html lang="en"> 
<body ng-app="meanDemo"> 
    <div class="container" ng-controller="mainCtrl as main"> 
    <ul> 
     <li ng-repeat="meetup in main.meetups"> 
      {{ meetup.name }} 
     </li> 
    </ul> 
</div> 


<form ng-submit="main.createMeetup()"> 
    <input type="text" placeholder="Meetup Name" ng-model="main.meetupName"> 
    <button class="btn btn-primary" type="submit">Add</button> 
</form>

Javascript

angular.module('meanDemo', []); 

angular.module('meanDemo').controller('mainCtrl', function(){ 

var vm = this; 
vm.meetups = [ { name: 'Ralphs Meetup'}]; 

vm.createMeetup = function(){ 
    console.log('hello'); 
    vm.meetups.push({ name: vm.meetupName }); 
    vm.meetups.push({ name: 'bobs meetup' }); 
    vm.meetupName = " " 
} 


vm.createMeetup(); 
console.log(vm.meetups)

источник

2015-02-14 Enjayy

Вопрос заключается в том, что ваша форма находится за пределами DIV, который имеет свой атрибут ng-controller. Поэтому форма не связана с вашим контроллером mainCtrl и не имеет доступа к функции createMeetup.

Вот фрагмент кода, все, что вам нужно сделать, на самом деле, это переместить форму внутри DIV с атрибутом ng-controller:

angular.module('meanDemo', []); 
 

 
angular.module('meanDemo').controller('mainCtrl', function() { 
 
    var vm = this; 
 

 
    vm.meetups = [{ 
 
    name: 'Ralphs Meetup' 
 
    }]; 
 

 
    vm.createMeetup = function() { 
 
    console.log('hello'); 
 
    vm.meetups.push({ 
 
     name: vm.meetupName 
 
    }); 
 
    vm.meetups.push({ 
 
     name: 'bobs meetup' 
 
    }); 
 
    vm.meetupName = " " 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="meanDemo"> 
 
    <div class="container" ng-controller="mainCtrl as main"> 
 
    <ul> 
 
     <li ng-repeat="meetup in main.meetups"> 
 
     {{ meetup.name }} 
 
     </li> 
 
    </ul> 
 

 
    <form ng-submit="main.createMeetup()"> 
 
     <input type="text" placeholder="Meetup Name" ng-model="main.meetupName"> 
 
     <button class="btn btn-primary" type="submit">Add</button> 
 
    </form> 
 
    </div> 
 
</body>

источник

2015-02-14 00:53:22 lwalden

Спасибо! Я думаю, что я потратил столько времени, пытаясь понять, что я выгляжу так, как тег div ... Спасибо за дополнительные глаза! – Enjayy

ответ

Смежные вопросы