0

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

这是一个让事情变得更容易的插件：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';      
}]);

任何帮助都是极好的。

4

2 回答 2

5

这是我相信你想要的工作解决方案：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>
于 2014-11-11T14:47:44.623 回答
1

您的输入绑定到用户名ng-model="username"

所以在您的控制器中，您可以通过以下方式设置用户名：

 $scope.username = 'John Doe';

请看下面的演示

window.angular.module('App', []);
window.angular.module('App').controller('TestController', ['$scope',
  function($scope) {
    $scope.myForm = {};
    $scope.username = 'John Doe';
  }
]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" data-semver="3.2.0" data-require="bootstrap@*" />
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1" data-require="angular.js@*"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>

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

于 2014-11-11T14:43:16.470 回答