0

angularjsフォームにデータを渡そうとしていますが、成功しません。モジュールを定義し、それをテンプレートで呼び出し、テンプレートをコントローラーにバインドしています。既存のユーザー名を値としてフィールドに表示するために、 $scope 変数に何かを渡すという考え方です。ユーザーの追加と編集には、同じフォームが使用されます。最後のケースでは、ID でユーザーを取得し、変数$scopeを介してユーザーの情報を渡します。myForm

物事を簡単にするプランカーを次に示します: 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 に答える