Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create conditional display using AngularJS

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 648
    Comment on it

    With the help of AngularJS, I have created a conditional display function. In the example given below, I have used ng-show( for showing the element ) and ng-hide( similar to 'display:none' or hide the element ) derivatives.


    HTML-

    <!DOCTYPE html>
    <html lang="en" ng-app="showHideDemo">
    <head>
        <meta charset="utf-8" />
        <title>Check Phone Price</title>
        <meta content="width=device-width" name="viewport" />
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet" >
    </head>
    <body >
    <div class="container">
        <div class="well" ng-controller="showHideController">
        <div class="chooseLib">
            <label ng-repeat="lib in libs"><input type="checkbox" ng-model="lib.checked">{{lib.name}}</label>
        </div>
        <ul class="libs">
            <li ng-repeat="lib in libs" ng-show="lib.checked"><span class="glyphicon glyphicon-ok"></span>{{lib.name}}</li>
        </ul>
    
        </div>
    
    </div>
    
    <!-- Script files-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script src="js/script.js"></script>
    
    </body>
    </html>
    

    CSS-

    body{padding-top: 15px;}
    input[type="checkbox"] {margin-right: 5px;}
    label {margin-right: 10px;}
    .header {margin-bottom: 30px;}
    .chooseLib{border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 20px;}
    .libs {list-style-type: none; margin: 0px; padding: 0px; width: 300px;}
    .libs li {background: PINK; padding: 10px;  margin-bottom: 3px;}
    .libs li span{margin-right: 10px;}
    

    JS-

    var showHideDemo = angular.module('showHideDemo',[]);
    showHideDemo.controller('showHideController', function($scope){
        $scope.libs = [
            {name: 'SonyXperia', checked: false},
            {name: 'Samsung', checked: true},
            {name: 'apple', checked: false},
            {name: 'Moto', checked: false},
            {name: 'LG', checked: false},
            {name: 'Lenovo', checked: false},
    
        ];
    });
    

    Hope this will help you.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: