<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/angular.js"></script>
</head>
<body>
<div class="container" ng-app="app" ng-controller="ctrl">
<table style="margin-top:10px">
<tr><td>Add New Row</td><td> </td><td ><a style="color:green;margin-left:153px" ng-click="add()">+</a></td></tr>
</table>
<table id="tb">
<tr ng-repeat="c in list">
<td>Name</td>
<td><input style="margin-left:10px" type="text" class="form-control" ng-model="c.NAME" /></td>
<td><a style="color:red;margin-left:20px" ng-click="sub(c)">-</a></td>
</tr>
<tr><td colspan="3"> </td></tr>
<tr><td> </td><td><input type="button" ng-click="save()" class="btn btn-primary" value="Save" style="width:80px" /></td><td> </td></tr>
</table>
</div>
</body>
</html>
<script type="text/javascript">
angular.module("app", [])
.controller("ctrl", function ($scope) {
var m = [{NAME:null}];
$scope.add = function ()
{
m.push({ NAME: null });
fill();
}
$scope.sub = function (s)
{
if(m.length>1)
m.splice(m.indexOf(s), 1);
}
function fill()
{
$scope.list = m;
} fill();
$scope.save = function ()
{
for (var i = 0; i < m.length; i++)
alert(m[i].NAME);
}
});
</script>
No comments:
Post a Comment