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)