Question

我正在做我的hello world等效的angularjs，虽然我按照教程中提到的所有说明操作，但我没有建立双向绑定。

即使我应该在页面上看到formData的实际值，我也会看到＆＃34; {{formData}}＆＃34;在它。

<!-- index.html -->

<!doctype html>
<html>
<head>
    <title>Angular Forms</title>

    <!-- LOAD BOOTSTRAP CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

    <!-- LOAD JQUERY -->
        <!-- when building an angular app, you generally DO NOT want to use jquery -->
        <!-- we are breaking this rule here because jQuery's $.param will help us send data to our PHP script so that PHP can recognize it -->
        <!-- this is jQuery's only use. avoid it in Angular apps and if anyone has tips on how to send data to a PHP script w/o jQuery, please state it in the comments -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <!-- PROCESS FORM WITH AJAX (OLD) -->
    <!-- LOAD JQUERY -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <!-- LOAD ANGULAR -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

    <!-- PROCESS FORM WITH AJAX (NEW) -->
    <script>

        // define angular module/app
        var formApp = angular.module('formApp', []);

        // create angular controller and pass in $scope and $http
        function formController($scope, $http) {

            // create a blank object to hold our form information
            // $scope will allow this to pass between controller and view
            $scope.formData = {};
        }

    </script>

</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">

    <!-- PAGE TITLE -->
    <div class="page-header">
        <h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1>
    </div>

    <!-- SHOW ERROR/SUCCESS MESSAGES -->
    <div id="messages"></div>

    <!-- FORM -->
    <form>
        <!-- NAME -->
        <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>

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

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

    <!-- SHOW DATA FROM INPUTS AS THEY ARE BEING TYPED -->
    <pre>
        {{ formData }}
    </pre>

</div>
</div>
</body>
</html>

Answer 1

您的示例有几个问题：

控制器定义错误，好方法是：

formApp.controller('formController', function($scope, $http) {
    // create a blank object to hold our form information
    // $scope will allow this to pass between controller and view
    $scope.formData = {};
})

缺少HTML中的ng-app和ng-controller指令

选中fixed code。

无法在angularjs中进行双向数据绑定

1 个答案: