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
    • 622
    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.


    <!DOCTYPE html>
    <html lang="en" ng-app="showHideDemo">
        <meta charset="utf-8" />
        <title>Check Phone Price</title>
        <meta content="width=device-width" name="viewport" />
        <link href="" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet" >
    <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">{{}}</label>
        <ul class="libs">
            <li ng-repeat="lib in libs" ng-show="lib.checked"><span class="glyphicon glyphicon-ok"></span>{{}}</li>
    <!-- Script files-->
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src="js/script.js"></script>


    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;}


    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

Sign up using

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: