javascript - AngularJS 将数据传递到表单不起作用

标签 javascript angularjs angularjs-templates

我正在尝试将一些数据传递到 angularjs 表单,但没有成功。 我正在定义一个模块,在模板中调用它并将模板绑定(bind)到 Controller 。这个想法是将某些内容传递给 $scope 变量,以便将现有用户名显示为字段的值。相同的表单将用于添加和编辑用户。在最后一种情况下,我将通过 id 获取用户,并通过 myForm 变量将他的信息传递到 $scope

这是一个让事情变得更容易的插件:http://plnkr.co/edit/nAabxgrw4HqLcgrErVxq?p=preview

模板:

<div ng-app="App">
<form ng-controller="TestController" class="form-horizontal" name="myForm" novalidate>
  <div class="form-group" ng-class="{ 'has-error' : myForm.username.$invalid && !form.username.$pristine }">
                        <div class="col-md-6">
                            <label class="control-label no-padding-right" for="username">Nome</label>
                            <input 
                                name="username" 
                                id="username" 
                                ng-model="username" 
                                type="text" 
                                class="form-control" 
                                ng-required="true" />
                            <p ng-show="myForm.username.$invalid && !myForm.username.$pristine" 
                                        class="help-inline no-padding">This field is required</p>
                        </div>
                    </div>
 <p>{{ myForm.username }}</p>
</form>
</div>

代码:

window.angular.module('App', []);
window.angular.module('App').controller('TestController', ['$scope', function ($scope) {
  $scope.myForm = {};
  $scope.myForm.username = 'John Doe';      
}]);

任何帮助都会很棒。

最佳答案

这是我认为是您想要的工作解决方案:http://plnkr.co/edit/zH3qeoF26WlrmituvGDd

      <head>
        <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
        <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
      </head>

      <body>
        <div ng-app="App">
    <form ng-controller="TestController" class="form-horizontal" name="myForm" novalidate>
      <div class="form-group" ng-class="{ 'has-error' : myForm.username.$invalid && !form.username.$pristine }">
        <div class="col-md-6">
            <label class="control-label no-padding-right" for="username">Nome</label>
            <input ng-value="myForm.username"
                name="username" 
                id="username" 
                ng-model="username" 
                type="text" 
                class="form-control" 
                ng-required="true" />
            <p ng-show="myForm.username.$invalid && !myForm.username.$pristine" 
                        class="help-inline no-padding">This field is required</p>
        </div>
    </div>
     <p>{{ username }}</p>
    </form>
    </div>
      </body>

    </html>

关于javascript - AngularJS 将数据传递到表单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26866979/

相关文章:

JavaScript 最大无符号整数 32?

javascript - 将设置传递给 AngularJS 应用程序

javascript - AngularJS 表单 $valid 在验证完成之前设置为 true

angularjs - 选择标签中的空选项字段 - Angular js

javascript - 使用 gulp-angular-templatecache 将 HTML 合并到 template.js 中,出现 $injector Module Unavailable 错误

javascript - HTML5 音频可视化工具?

javascript - StandardJs + ES6 扩展类 - 无用的构造函数?

javascript - Meteor:如何使用空格键创建包含来自两个集合的数据的树列表?

javascript - AngularJS 使用参数创建部分模板

javascript - 指令中的 AngularJS 模板函数给出错误 'Template for directive must have exactly one root element'