Friday 7 December 2018
Add Data in table through Form in angular js ||Basics of Angular JS || P...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular.min.js"></script>
<style>
ul li {
list-style-type: none;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<h1>To do List</h1>
<div class="row">
<div class="container">
<form ng-submit="todoAdd()">
<table>
<tr>
<td>Name</td>
<td><input type="text" class="form-control" placeholder="Enter name here...." ng-model="txtname" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" class="form-control" placeholder="Enter Email here...." ng-model="txtemail" /></td>
</tr>
<tr>
<td>Date of Birth</td>
<td><input type="date" class="form-control" placeholder="Enter Email here...." ng-model="txtdob" /></td>
</tr>
<tr>
<td>
<input type="submit" value="Add" class="btn btn-success" />
</td>
<td>
<input type="button" value="Delete" class="btn btn-danger" ng-click="remove()" />
</td>
</tr>
</table>
</form>
</div>
<div class="container">
<table class="table table-dark table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Date of Birth</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in todoList">
<td>{{x.name}}</td>
<td>{{x.email}}</td>
<td>{{x.dob}}</td>
<td>
<input type="checkbox" ng-model="x.done" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope)
{
$scope.todoList = [{ name: 'salman masood',email:'theideassolution@gmail.com',dob:'1991-01-12' ,done: false }];
$scope.todoAdd = function ()
{
if ($scope.txtname != "" && $scope.txtemail != "" && $scope.txtdob != "")
{
$scope.todoList.push({ name: $scope.txtname, email: $scope.txtemail, dob: $scope.txtdob, done: false });
$scope.txtname = "";
$scope.txtemail = "";
$scope.txtdob = "";
}
};
$scope.remove = function ()
{
var oldList = $scope.todoList;
$scope.todoList = [];
angular.forEach(oldList, function (x)
{
if (!x.done) $scope.todoList.push(x);
});
};
});
</script>
Subscribe to:
Posts (Atom)
Pass Dynamically Added Html Table Records List To Controller In Asp.net MVC
Controller Code: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ...
