[英]Get Value of dynamically created table row value using angularjs
I am a newbie in angularjs. 我是angularjs的新手。 I have a table and need to add some row dynamically.
我有一张桌子,需要动态添加一些行。 Everything working fine with a little of JQuery as well.
一点JQuery也可以使一切正常运行。 But when I try to get value of dynamically created table row it's not working.
但是,当我尝试获取动态创建的表行的值时,它不起作用。 My code is here.
我的代码在这里。 Please help.
请帮忙。
<div ng-app="Myapp">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
<script>
var Myapp = angular.module('Myapp', ["ngRoute"]);
</script>
<div ng-controller="orderFormController">
<table id="item_table">
<thead>
<tr class="headings">
<th class="column-title">Item </th>
<th class="column-title">Rate</th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="item" ng-model='item[0]'>
</td>
<td class=" "><input type="text" name="rate" ng-model='rate[0]'> </td>
<td class=" "><a onclick="addrow()">add(+)</a> </td>
</tr>
</tbody>
</table>
<button type="button" ng-click='saveorder()' >SAVE ORDER</button>
</div>
<script>
Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {
var data = {};
data['item'] = [];
$scope.item = '';
$scope.rate = '';
$scope.saveorder = function () {
var row_count = $('#item_table tr').length;
for (i = 1; i <= row_count; i++) {
data['item'][i] = {'item': $scope.item[i], 'rate': $scope.rate[i]}
}
alert($scope.item[0]);
alert($scope.item[1]);
}
}]);
function addrow() {
var row = $('#item_table tr').length + 1;
var row_string = '<tr><td><input type="text" name="item" ng-model="item[' + row + ']"></td><td class=" "><input type="text" name="rate" ng-model="rate['+ row +']"> </td><td class=" "><a onclick="addrow()">add(+)</a> </td></tr>';
$('#item_table tbody').append(row_string);
}
</script>
I think you must use $compile after element.append. 我认为您必须在element.append之后使用$ compile。
You can try something like this: 您可以尝试如下操作:
var row = $('#item_table tr').length + 1;
var row_string = '<tr><td><input type="text" name="item" ng-model="item[' + row + ']"></td><td class=" "><input type="text" name="rate" ng-model="rate['+ row +']"> </td><td class=" "><a onclick="addrow()">add(+)</a> </td></tr>';
var newRow= angular.element(row_string);
$('#item_table tbody').append(newRow);
$compile(newRow )($scope);
You can use ng-repeat directive for it. 您可以使用ng-repeat指令。 You can check the link.
您可以检查链接。 It might help you.
它可能会帮助您。 In controller you can write like this to add a row.
在控制器中,您可以这样编写以添加一行。
$scope.rows.forEach(function (row) {
console.log('row #' + (index++) + ': ' + JSON.stringify(row));
});
http://jsfiddle.net/shardulpendse/qbdrt00a/1/ http://jsfiddle.net/shardulpendse/qbdrt00a/1/
To get the value of dynamically added row to a table, use : 要获取向表中动态添加的行的值,请使用:
$('table#item_table tbody').on('click', function(e){
e.preventDefault();
// select new row added by class or id
do your stuff here...
});
There must be two change: 必须进行两个更改:
Move function addrow() in controller like 在控制器中移动函数addrow()
$scope.addrow = function(){ } $ scope.addrow = function(){}
And call it using ng-click 并使用ng-click进行调用
Use $compile in append method like: 在$ append方法中使用$ compile,例如:
$('#item_table tbody').append($compile(row_string)($scope)); $('#item_table tbody')。append($ compile(row_string)($ scope));
then try, it should work fine. 然后尝试,应该可以正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.