0

ng-submit で関数を呼び出して配列にプッシュしようとしていますが、関数をコンソール ログに記録すると、ng-submit が呼び出されないボタン イベントで明らかに機能します。私はこの問題を長い間研究してきました。問題のコードペンを作成しました。

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)
4

1 に答える 1

1

問題は、フォームがng-controller属性を持つ div の外にあることです。したがって、フォームはmainCtrlコントローラーに接続されておらず、createMeetup関数にアクセスできません。

コード スニペットを次に示します。実際に行う必要があるのは、次のng-controller属性を使用してフォームを div 内に移動することだけです。

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-14T00:53:22.370 に答える