我正在尝试将一些数据传递到 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/