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 withform elements
likeinput
,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 withform elements
likeinput
,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>