AngularJs ng show and ng hide,ng init directive
AngularJs ng show and ng hide used to record display and hide when user action . ng init directive used to access the inside of the current controller Scope.
ng-show="Hide"
ng-hide="Show"
DEMO
Add New Webform - Add ng-init to directly current scope <div ng-init=""> - next - add ng-show for when checkbox check only show
AngularJs ng show and ng hide used to record display and hide when user action . ng init directive used to access the inside of the current controller Scope.
ng-show="Hide"
ng-hide="Show"
ng-init="cou = [
{ name: 'Anto', course: 'Jquery', amount: '9999' },
{ name: 'Sam Dany', course: 'Asp.Net', amount: '5900' },
{ name: 'Rahul', course: 'HTML', amount: '8699'},
{ name: 'Praveen', course: 'C#', amount: '7900' },
{ name: 'Prasath', course: 'AngularJs', amount: '8998' }];
DEMO
HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app>
<form id="form1" runat="server">
<div align="center" ng-init="cou = [
{ name: 'Anto', course: 'Jquery',
amount: '9999' },
{ name: 'Sam Dany', course:
'Asp.Net', amount: '5900' },
{ name: 'Rahul', course: 'HTML',
amount: '8699'},
{ name: 'Praveen', course: 'C#',
amount: '7900' },
{ name: 'Prasath', course:
'AngularJs', amount: '8998' }]; ">
<input type="checkbox" ng-model="Hide" />HIDE/SHOW
<table>
<thead>
<tr>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="course in cou">
<td>{{course.name}}</td>
<td style="color:red" ng-show="Hide">{{course.course}}</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
Add New Webform - Add ng-init to directly current scope <div ng-init=""> - next - add ng-show for when checkbox check only show
.gif)
0 comments:
Post a Comment