个人中心
gpt4 book ai didi

javascript - 无法在angularjs中进行双向数据绑定(bind)

转载 作者：行者123 更新时间：2023-11-30 05:36:31 24 4
gpt4 key购买 nike

我正在做 angularjs 的 hello world 等价物，尽管我按照教程中提到的所有说明进行操作，但我无法建立双向绑定(bind)。

尽管我应该在页面上看到 formData 的实际值，但我在其中看到了“{{formData}}”。

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

最佳答案

你的例子有几个问题:

  1. Controller 定义错误，好的方法是:

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

  2. HTML 中缺少 ng-app 和 ng-controller 指令

检查这个fixed code .

关于javascript - 无法在angularjs中进行双向数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23471453/

24 4 0
文章推荐： javascript - 如何使 Ext.js 4 网格插件有状态？
文章推荐： c++ - 如何在 C++ 中使用 Poco 连接安全的 websocket
文章推荐： c++ - 如何将帧缓冲区数据写入 JPEG 或 BMP 图像
文章推荐： javascript - 具有可变偏移顶部的 div 上的 ScrollTo 动画无法正常工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com