vcgit-forge/TurtleFactsQuiz
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/TurtleFactsQuiz.git synced 2026-02-10 11:33:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

real-time search using filters && ng-hide/ng-show && ng-click event

Browse Source
This commit is contained in:
Raghu-Ch
2017-01-31 22:12:36 -08:00
parent 31310b60ea
commit bbd5d3d5db
2 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@@ -19,9 +19,16 @@
</h3> </h3>
</div> </div>
<!-- Hook on the controller for this view and specify when to show it using ng-hide --> <!-- Hook on the controller for this view and specify when to show it using ng-hide -->
<div ng-controller = "listCtrl as list"> <div ng-controller = "listCtrl as list" ng-hide = "list.quizActive">
<form class = "form-inline well well-sm clearfix">
<span class = "glyphicon glyphicon-search"></span>
<input type="text" placeholder ="search" class="form-control" ng-model = "list.search">
<button class = "btn btn-warning pull-right" ng-click = "list.activateQuiz()">
<strong>Start Quiz</strong>
</button>
</form>
<div class="row"> <div class="row">
<div class="col-sm-6" ng-repeat = "turtle in list.data"> <div class="col-sm-6" ng-repeat = "turtle in list.data | filter:list.search">
<div class="well well-sm"> <div class="well well-sm">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">

9
js/controllers/list.js
View File

@@ -10,12 +10,19 @@
vm.data = turtlesData; vm.data = turtlesData;
vm.activeTurtle = {}; // will be used in the view to hold the data of currently active turtle vm.activeTurtle = {}; // will be used in the view to hold the data of currently active turtle
vm.search = ""; // Adding the Search property to be used in the ng-model
vm.quizActive = false;
vm.changeActiveTurtle = changeActiveTurtle; vm.changeActiveTurtle = changeActiveTurtle;
vm.activateQuiz = activateQuiz;
function changeActiveTurtle (index) { function changeActiveTurtle (index) {
vm.activeTurtle = index; vm.activeTurtle = index;
} }
function activateQuiz () {
vm.quizActive = true;
}
} }
var turtlesData = [ var turtlesData = [