angularjs - Angular 1.3 数据绑定不起作用

Question

我在使用 Angular 1.3.2 时遇到了一些问题

我希望看到 formData 对象填充了输入字段中输入的任何内容

我有以下代码。

angular.module('formApp', [])

.controller('FormController', function ($scope, $http) {

  $scope.formData = {};

  $scope.processForm = function () {

  };

});

<div class="form-container" ng-app="formApp" ng-controller="FormController">
<div class="container">
    <form>
        <div id="name-group" class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
            <span class="help-block"></span>
        </div>

        <div id="superhero-group" class="form-group">
            <label>Superhero Alias</label>
            <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader"
                   ng-model="formData.superheroAlias">
            <span class="help-block"></span>
        </div>

        <button type="submit" class="btn btn-success btn-lg btn-block">
            <span class="glyphicon glyphicon-flash"></span> Submit!
        </button>
    </form>

    <pre>
        {{ formData }}
    </pre>

</div>
</div>

Answer 1

Copied your code and it is working, see below:

angular.module('formApp', [])

.controller('FormController', function ($scope, $http) {

  $scope.formData = {};

  $scope.processForm = function () {

  };

});

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

<div class="form-container" ng-app="formApp" ng-controller="FormController">
<div class="container">
    <form>
        <div id="name-group" class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
            <span class="help-block"></span>
        </div>

        <div id="superhero-group" class="form-group">
            <label>Superhero Alias</label>
            <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader"
                   ng-model="formData.superheroAlias">
            <span class="help-block"></span>
        </div>

        <button type="submit" class="btn btn-success btn-lg btn-block">
            <span class="glyphicon glyphicon-flash"></span> Submit!
        </button>
    </form>

    <pre>
        {{ formData }}
    </pre>

</div>
</div>

Answer 2

您的 ngcontroller 语法中有错字。它应该是ng-controller

<div class="form-container" ng-app="formApp" ng-controller="FormController">