ng-hide : Shows or hides the given HTML element based on the expression provided to the ngHide attribute.This helps when creating Angular apps since our single page applications will most likely have many moving parts that come and go as the state of our application changes
The great part about these directives is that we don’t have to do any of the showing or hiding ourselves with CSS or JavaScript.
ex as shown below: If firstname model has values last name is shown.
Edit in plunkr
<!DOCTYPE html> <html ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <meta charset="utf-8" /> </head> <body > <div class="container"> <div ng-controller="userctrl"> <br/> <p ng-hide="firstName"> First Name: <input type="text" ng-model="firstName"><br> <br> Full Name: {{firstName }} </p> <p ng-hide="!firstName"> Last Name : <input type="text" ng-model="firstName"><br> <br> Last Name: {{lastName }} </p> </div> </div> </body> </html>
Javascript
<script>
var app = angular.module('myApp', []);
app.controller('userctrl', function ($scope) {
$scope.firstName = "";
$scope.lastName = "Kudupu";
});
</script>
Output
Note:Last name is hidden till first name is entered
No comments:
Post a Comment