Question

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

一个简单的Angular应用，不确定为什么ng-submit没有触发createMeetup函数

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>

控制器

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

Answer 1

表单元素位于控制器范围之外。

<!-- 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>

为什么ng-submit没有提交和更新模型

1 个答案: