Wednesday 28 November 2018
Filters in Angular JS|| Basics of Angular JS || Part-6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<h1 style="text-align:center"> {{Message}}</h1>
<select>
<option ng-repeat="x in city">{{x}}</option>
</select>
<input type="text" ng-model="test" />
<br />
<br />
<br />
<table class="table table-responsive">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="y in employee |filter:test">
<td>{{y.id}}</td>
<td>{{y.name | lowercase}} </td>
<td>{{y.Department}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope) {
$scope.Message = "Hello to Angular JS";
$scope.city = ["karachi", "Lahore", "Islamabad"];
$scope.employee = [{ id: 101, name: 'Ali', Department: 'CS' }, { id: 102, name: 'AHMED', Department: 'MATHS' }, { id: 103, name: 'SALMAN', Department: 'CS' }];
});
</script>
Scopes in Anguls JS
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<h1 style="text-align:center"> {{Message}}</h1>
<select>
<option ng-repeat="x in city">{{x}}</option>
</select>
<table class="table table-responsive">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="y in employee">
<td>{{y.id}}</td>
<td>{{y.name}}</td>
<td>{{y.Department}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope) {
$scope.Message = "Hello to Angular JS";
$scope.city = ["karachi", "Lahore", "Islamabad"];
$scope.employee = [{ id: 101, name: 'Ali', Department: 'CS' }, { id: 102, name: 'AHMED', Department: 'MATHS' }, { id: 103, name: 'SALMAN', Department: 'CS' }];
});
</script>
Scopes in Anguls JS
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<h1 style="text-align:center"> {{Message}}</h1>
<select>
<option ng-repeat="x in city">{{x}}</option>
</select>
<table class="table table-responsive">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="y in employee">
<td>{{y.id}}</td>
<td>{{y.name}}</td>
<td>{{y.Department}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope) {
$scope.Message = "Hello to Angular JS";
$scope.city = ["karachi", "Lahore", "Islamabad"];
$scope.employee = [{ id: 101, name: 'Ali', Department: 'CS' }, { id: 102, name: 'AHMED', Department: 'MATHS' }, { id: 103, name: 'SALMAN', Department: 'CS' }];
});
</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 ...
