无法绑定角js中的数据。

时间:2021-03-14 21:38:45

I need to bind data for the submission of the form which is in table's column. I am trying to bind data like this

我需要绑定表列中表单的提交数据。我正在尝试绑定这样的数据。

<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>

but the output is undefined.

但是输出是未定义的。

3 个解决方案

#1


1  

Delete de ng-model from the td, ng-model are only for elements i/o

从td中删除de ng模型,ng模型只适用于元素i/o。

Controller

控制器

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

HTML

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>

#2


0  

Yes, remove the ng-model and pass the domain as parameter in addCart method, see here Plunker

是的,删除ng模型,并以addCart方法中的参数传递域,参见这里的插入。

#3


0  

Some observations :

一些观察:

  • ng-model work with form elements like input,select,checkbox,radio,etc..
  • ng模型与表单元素,如输入、选择、复选框、广播等。
  • You can directly use angular expression {} to bind the data in the <td>,<p>,<span>,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>

#1


1  

Delete de ng-model from the td, ng-model are only for elements i/o

从td中删除de ng模型,ng模型只适用于元素i/o。

Controller

控制器

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

HTML

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>

#2


0  

Yes, remove the ng-model and pass the domain as parameter in addCart method, see here Plunker

是的,删除ng模型,并以addCart方法中的参数传递域,参见这里的插入。

#3


0  

Some observations :

一些观察:

  • ng-model work with form elements like input,select,checkbox,radio,etc..
  • ng模型与表单元素,如输入、选择、复选框、广播等。
  • You can directly use angular expression {} to bind the data in the <td>,<p>,<span>,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>