2017-07-31 20 views
-1

テーブルの列にあるフォームの提出のためにデータをバインドする必要があります。 私はこの角度jsでデータをバインドできません

<tr ng-repeat="domain in domainlist"> 
<td name="domain" ng-model="domain.domain" >{{domain.domain}}</td> 
<td name="status" ng-model="domain.status" >{{domain.status}}</td> 
<td name="price" ng-model="domain.price" >{{domain.price}}</td> 
<td><button class="btn btn-success" ng-click="addCart()">Add To cart</button></td> 
</tr> 

などのデータをバインドしようとしていますが、出力は不定です。

+0

あなたは 'domainlist'が移入され、コントローラのコードを追加することはできますか? – Vandesh

+3

ng-modelは '​​'ではなく ' 'で使用することを意図しています。定義されていない部分はどこにありますか?私は出力が空白であることを意味すると仮定します。 –

答えて

1

tdからデNGモデルを削除し、NGモデルは、I/Oの

コントローラ

.controller('myController', function($scope){ 
    $scope.domainlist = [{domain: 'myDomain1', status: 1, price: 200}, 
         {domain: 'myDomain2', status: 1, price: 250}]; 
}); 

HTML

<tr ng-repeat="domain in domainlist"> 
    <td name="domain">{{domain.domain}}</td> 
    <td name="status">{{domain.status}}</td> 
    <td name="price">{{domain.price}}</td> 
    <td><button class="btn btn-success" ng-click="addCart()">Add To cart</button> 
    </td> 
</tr> 
0

はい、除去要素のみですngモデルを作成し、addCartメソッドのパラメータとしてドメインを渡します。Plunker

0

いくつかの観察:あなたが直接<td><p><span>にデータをバインドするために、角表現{}を使用することができますetc..

  • inputようform elementsselectcheckboxradio

    • ng-model仕事、 、etc..

    DEMO

    var myApp = angular.module('myApp',[]); 
     
    
     
    myApp.controller('MyCtrl', function($scope) { 
     
        $scope.domainList = [{"domain": 'myDomain1', "status": 1, "price": 200}, 
     
             {"domain": 'myDomain2', "status": 1, "price": 250}]; 
     
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
     
    <div ng-app="myApp" ng-controller="MyCtrl"> 
     
    <table> 
     
        <tr ng-repeat="item in domainList"> 
     
        <td>{{item.domain}}</td> 
     
        <td>{{item.status}}</td> 
     
        <td>{{item.price}}</td> 
     
        <td><button class="btn btn-success" ng-click="addCart()">Add To cart</button></td> 
     
        </tr> 
     
    </table> 
     
    </div>

  • 関連する問題