ADAM / AIAHTML5

Commit 3c49db61ce9031ab685cffe84788a1f9d8382e1e

Authored by Nikita Kulshreshtha
1 parent 3d61925d

merged AdamImagesSearch

Inline Side-by-side
Showing 3 changed files with 145 additions and 484 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/AIController.js
  View file @3c49db6
... ... @@ -223,6 +223,9 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
223 223  
224 224 $scope.ApplySearch = function (SearchText) {
225 225  
  226 + $rootScope.isLoading = true;
  227 + $('#spinner').css('visibility', 'visible');
  228 +
226 229  
227 230 $scope.filterstring = true;
228 231  
... ... @@ -260,7 +263,7 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
260 263 var selectimg = true;
261 264 //var count = 0;
262 265 if (typeof (SearchText) !== "undefined" && (SearchText !== null && SearchText !== "")) {
263   - var posbodyregion = value._Title.indexOf(SearchText);
  266 + var posbodyregion = value._Title.toLowerCase().indexOf(SearchText.toLowerCase());
264 267 if (posbodyregion > -1) {
265 268 selectimg = true;
266 269 //count = count + 1;
... ... @@ -276,12 +279,13 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
276 279 if (selectimg === true) {
277 280 $scope.imagePath = "~/../content/images/ai/thumbnails/" + value._ThumbnailImage;
278 281  
279   - var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-2" title = "' + value._Title + '" data-ng-click="OpenAdamImage($event)">'
280   - + '<div class="thumbnail" >'
281   - + '<img id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
282   - + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
  282 + var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-2" title = "' + value._Title + '" data-ng-click="AdamDetail($event)">'
  283 + + '<div style="width:auto;height:auto;" class="thumbnail" >'
  284 + + '<img style="height:150px" id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
  285 + + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
283 286  
284 287 $compile($el)($scope);
  288 +
285 289  
286 290 $(".sidebar").mCustomScrollbar({
287 291 autoHideScrollbar: true,
... ... @@ -310,6 +314,9 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
310 314  
311 315 $('#ListViewDiv').append('<tr id="searchItem"><td colspan="6"><strong style="color:black;">No illustration found for the selected search criteria!</strong></td></tr>');
312 316 }
  317 + $rootScope.isLoading = false;
  318 + $('#spinner').css('visibility', 'hidden');
  319 +
313 320 },
314 321 function (error) {
315 322 // handle errors here
... ... @@ -319,6 +326,113 @@ function ($scope, $window, $rootScope, $compile, $http, log, $location, $timeout
319 326 }
320 327  
321 328  
  329 +
  330 + $scope.ApplySearchByAlphabet = function (SearchText) {
  331 +
  332 + $rootScope.isLoading = true;
  333 + $('#spinner').css('visibility', 'visible');
  334 +
  335 + $scope.filterstring = true;
  336 +
  337 + while ($scope.searchAIListViewData.length) {
  338 + $scope.searchAIListViewData.pop();
  339 + }
  340 +
  341 +
  342 +
  343 +
  344 + if (typeof (SearchText) !== "undefined" && (SearchText !== null && SearchText !== "")) {
  345 +
  346 + localStorage.setItem("AIImageId", SearchText);
  347 +
  348 + }
  349 + else {
  350 + localStorage.setItem("AIImageId", '');
  351 +
  352 + }
  353 +
  354 + var promise = DataService.getJson('~/../content/data/json/ai/ai_dat_contentlist.json')
  355 + promise.then(
  356 + function (result) {
  357 + $scope.IllustrationData = result;
  358 +
  359 + $scope.selectedAIListViewData = new jinqJs()
  360 + .from($scope.IllustrationData.root.AIData)
  361 + .orderBy([{ field: '_Title', sort: 'asc' }])
  362 + .select();
  363 +
  364 + $('#grid-view').empty();
  365 +
  366 + angular.forEach($scope.selectedAIListViewData, function (value, key) {
  367 +
  368 + var selectimg = true;
  369 + //var count = 0;
  370 + if (typeof (SearchText) !== "undefined" && (SearchText !== null && SearchText !== "")) {
  371 +
  372 + var firstChar = value._Title[0];
  373 +
  374 + if (firstChar == SearchText) {
  375 + selectimg = true;
  376 + //count = count + 1;
  377 +
  378 + }
  379 + else {
  380 + selectimg = false;
  381 + //count = count - 1;
  382 + }
  383 +
  384 + }
  385 +
  386 + if (selectimg === true) {
  387 + $scope.imagePath = "~/../content/images/ai/thumbnails/" + value._ThumbnailImage;
  388 +
  389 + var $el = $('<div id="' + value._id + '" class="col-sm-3 col-md-2" title = "' + value._Title + '" data-ng-click="AdamDetail($event)">'
  390 + + '<div style="width:auto;height:auto;" class="thumbnail" >'
  391 + + '<img style="height:150px" id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
  392 + + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
  393 +
  394 + $compile($el)($scope);
  395 +
  396 +
  397 + $(".sidebar").mCustomScrollbar({
  398 + autoHideScrollbar: true,
  399 + //theme:"rounded"
  400 + });
  401 +
  402 +
  403 + $scope.searchAIListViewData.push(
  404 + {
  405 + "_id": value._id,
  406 + //"_ImageId": value._ImageId,
  407 + "_Title": value._Title,
  408 + "_contentImage": value._contentImage,
  409 + "_ThumbnailImage": value._ThumbnailImage,
  410 +
  411 +
  412 + });
  413 + }
  414 + });
  415 + $('table > #ListViewDiv > #searchItem').remove();
  416 + //Show Error Message in case of gridview if no data is found
  417 + if ($scope.searchAIListViewData.length == 0) {
  418 + var $el = $('<div class="col-sm-12" style="padding-left:25px;padding-top:10px;"><strong style="color:white">No illustration found for the selected search criteria!</strong></div>').appendTo('#grid-view');
  419 + $compile($el)($scope);
  420 + $('table > #ListViewDiv > #searchItem').remove();
  421 +
  422 + $('#ListViewDiv').append('<tr id="searchItem"><td colspan="6"><strong style="color:black;">No illustration found for the selected search criteria!</strong></td></tr>');
  423 + }
  424 + $rootScope.isLoading = false;
  425 + $('#spinner').css('visibility', 'hidden');
  426 +
  427 + },
  428 + function (error) {
  429 + // handle errors here
  430 + console.log(' $scope.IllustrationData = ' + error.statusText);
  431 + }
  432 + );
  433 + }
  434 +
  435 +
322 436 $scope.scroll = function () {
323 437 $("html,body").scrollTop(0);
324 438 }
... ...
400-SOURCECODE/AIAHTML5.Web/app/views/ai/ADAMImg-view.html deleted
View file @3d61925
1   -๏ปฟ<div class="bodyWrap row ">
2   - <div ng-include="'app/widget/MainMenu.html'" />
3   - <div class="main">
4   -
5   - <div class="row">
6   - <div class="col-sm-12 stickey-area" style="padding-left:25px; width:99%">
7   - <div class="breadcrumb" style="padding-bottom:5px;">
8   - <div class="row" align="center">
9   - <form class="form-inline padd5">
10   - <div class="form-group">
11   - <label for="exampleInputName2" class="text-primary">Search</label>
12   - <input type="text" class="form-control input-sm col-sm" id="exampleInputName2" placeholder="">
13   - </div>
14   - <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> GO</button>
15   - </form>
16   - <nav>
17   - <ul class="pagination pagination-sm no-margin">
18   -
19   - <li><a href="#">A</a></li>
20   - <li><a href="#">B</a></li>
21   - <li><a href="#">C</a></li>
22   - <li><a href="#">D</a></li>
23   - <li><a href="#">E</a></li>
24   - <li><a href="#">F</a></li>
25   - <li><a href="#">G</a></li>
26   - <li><a href="#">H</a></li>
27   - <li><a href="#">I</a></li>
28   - <li><a href="#">J</a></li>
29   - <li><a href="#">K</a></li>
30   - <li><a href="#">L</a></li>
31   - <li><a href="#">M</a></li>
32   - <li><a href="#">N</a></li>
33   - <li><a href="#">O</a></li>
34   - <li><a href="#">P</a></li>
35   - <li><a href="#">Q</a></li>
36   - <li><a href="#">R</a></li>
37   - <li><a href="#">S</a></li>
38   - <li><a href="#">T</a></li>
39   - <li><a href="#">U</a></li>
40   - <li><a href="#">V</a></li>
41   - <li><a href="#">W</a></li>
42   - <li><a href="#">X</a></li>
43   - <li><a href="#">Y</a></li>
44   - <li><a href="#">Z</a></li>
45   - <button class="btn btn-primary btn-sm"><i class="fa fa-eye"></i> Show All</button>
46   - </ul>
47   - </nav>
48   -
49   - </div>
50   - </div>
51   - </div>
52   - </div>
53   - <div class="row tab-content" style="padding-left:25px; width:99%">
54   - <div role="tabpanel" class="tab-pane active" id="grid-view">
55   - <div class="col-sm-3 col-lg-2">
56   - <div class="thumbnail">
57   - <a href="clinical-animations-details.html">
58   - <img src="~/../content/images/clinical-illustrations-1.jpg" alt="" title="">
59   - <div class="caption">
60   - <p>1.5-week Fetus</p>
61   - </div>
62   - </a>
63   - </div>
64   - </div>
65   - <div class="col-sm-3 col-lg-2">
66   - <div class="thumbnail">
67   - <a href="clinical-animations-details.html">
68   - <img src="~/../content/images/clinical-illustrations-2.jpg" alt="" title="">
69   - <div class="caption">
70   - <p>16-week Fetus</p>
71   - </div>
72   - </a>
73   - </div>
74   - </div>
75   - <div class="col-sm-3 col-lg-2">
76   - <div class="thumbnail">
77   - <a href="clinical-animations-details.html">
78   - <img src="~/../content/images/atlas-anatomy-1.jpg" alt="" title="">
79   - <div class="caption">
80   - <p>1st & 2nd Intercostal Spaces</p>
81   - </div>
82   - </a>
83   - </div>
84   - </div>
85   - <div class="col-sm-3 col-lg-2">
86   - <div class="thumbnail">
87   - <a href="clinical-animations-details.html">
88   - <img src="~/../content/images/atlas-anatomy-2.jpg" alt="" title="">
89   - <div class="caption">
90   - <p>1st 3rd & 8th Ribs</p>
91   - </div>
92   - </a>
93   - </div>
94   - </div>
95   - <div class="col-sm-3 col-lg-2">
96   - <div class="thumbnail">
97   - <a href="clinical-animations-details.html">
98   - <img src="~/../content/images/clinical-illustrations-3.jpg" alt="" title="">
99   - <div class="caption">
100   - <p>24-week Fetus</p>
101   - </div>
102   - </a>
103   - </div>
104   - </div>
105   - <div class="col-sm-3 col-lg-2">
106   - <div class="thumbnail">
107   - <a href="clinical-animations-details.html">
108   - <img src="~/../content/images/clinical-illustrations-4.jpg" alt="" title="">
109   - <div class="caption">
110   - <p>26 to 28-week Fetus</p>
111   - </div>
112   - </a>
113   - </div>
114   - </div>
115   - <div class="col-sm-3 col-lg-2">
116   - <div class="thumbnail">
117   - <a href="clinical-animations-details.html">
118   - <img src="~/../content/images/atlas-anatomy-3.jpg" alt="" title="">
119   - <div class="caption">
120   - <p>Abdomen at L5 Vertebra (Inf)</p>
121   - </div>
122   - </a>
123   - </div>
124   - </div>
125   - <div class="col-sm-3 col-lg-2">
126   - <div class="thumbnail">
127   - <a href="clinical-animations-details.html">
128   - <img src="~/../content/images/atlas-anatomy-4.jpg" alt="" title="">
129   - <div class="caption">
130   - <p>Abdomen at T12 Vertebra (Inf)</p>
131   - </div>
132   - </a>
133   - </div>
134   - </div>
135   - <div class="col-sm-3 col-lg-2">
136   - <div class="thumbnail">
137   - <a href="clinical-animations-details.html">
138   - <img src="~/../content/images/atlas-anatomy-5.jpg" alt="" title="">
139   - <div class="caption">
140   - <p>Abdominal Aortic Angiogram</p>
141   - </div>
142   - </a>
143   - </div>
144   - </div>
145   - <div class="col-sm-3 col-lg-2">
146   - <div class="thumbnail">
147   - <a href="clinical-animations-details.html">
148   - <img src="~/../content/images/clinical-animations-10.jpg" alt="" title="">
149   - <div class="caption">
150   - <p>Endocrine glands - general overview</p>
151   - </div>
152   - </a>
153   - </div>
154   - </div>
155   - <div class="col-sm-3 col-lg-2">
156   - <div class="thumbnail">
157   - <a href="clinical-animations-details.html">
158   - <img src="~/../content/images/clinical-animations-11.jpg" alt="" title="">
159   - <div class="caption">
160   - <p>Enlarged prostate gland (BPH)</p>
161   - </div>
162   - </a>
163   - </div>
164   - </div>
165   - <div class="col-sm-3 col-lg-2">
166   - <div class="thumbnail">
167   - <a href="clinical-animations-details.html">
168   - <img src="~/../content/images/clinical-animations-12.jpg" alt="" title="">
169   - <div class="caption">
170   - <p>Fetal development - interactive tool</p>
171   - </div>
172   - </a>
173   - </div>
174   - </div>
175   -
176   - <div class="col-sm-3 col-lg-2">
177   - <div class="thumbnail">
178   - <a href="clinical-animations-details.html">
179   - <img src="~/../content/images/clinical-animations-1.jpg" alt="" title="">
180   - <div class="caption">
181   - <p>Blood clotting</p>
182   - </div>
183   - </a>
184   - </div>
185   - </div>
186   - <div class="col-sm-3 col-lg-2">
187   - <div class="thumbnail">
188   - <a href="clinical-animations-details.html">
189   - <img src="~/../content/images/clinical-animations-2.jpg" alt="" title="">
190   - <div class="caption">
191   - <p>Blood pressure</p>
192   - </div>
193   - </a>
194   - </div>
195   - </div>
196   - <div class="col-sm-3 col-lg-2">
197   - <div class="thumbnail">
198   - <a href="clinical-animations-details.html">
199   - <img src="~/../content/images/clinical-animations-3.jpg" alt="" title="">
200   - <div class="caption">
201   - <p>Brain components</p>
202   - </div>
203   - </a>
204   - </div>
205   - </div>
206   - <div class="col-sm-3 col-lg-2">
207   - <div class="thumbnail">
208   - <a href="clinical-animations-details.html">
209   - <img src="~/../content/images/clinical-animations-4.jpg" alt="" title="">
210   - <div class="caption">
211   - <p>Cardiac conduction system</p>
212   - </div>
213   - </a>
214   - </div>
215   - </div>
216   - <div class="col-sm-3 col-lg-2">
217   - <div class="thumbnail">
218   - <a href="clinical-animations-details.html">
219   - <img src="~/../content/images/clinical-animations-5.jpg" alt="" title="">
220   - <div class="caption">
221   - <p>Conception - interactive tool</p>
222   - </div>
223   - </a>
224   - </div>
225   - </div>
226   - <div class="col-sm-3 col-lg-2">
227   - <div class="thumbnail">
228   - <a href="clinical-animations-details.html">
229   - <img src="~/../content/images/clinical-animations-6.jpg" alt="" title="">
230   - <div class="caption">
231   - <p>Coronary artery bypass graft (CABG)</p>
232   - </div>
233   - </a>
234   - </div>
235   - </div>
236   - <div class="col-sm-3 col-lg-2">
237   - <div class="thumbnail">
238   - <a href="clinical-animations-details.html">
239   - <img src="~/../content/images/clinical-animations-7.jpg" alt="" title="">
240   - <div class="caption">
241   - <p>Directional coronary atherectomy (DCA)</p>
242   - </div>
243   - </a>
244   - </div>
245   - </div>
246   - <div class="col-sm-3 col-lg-2">
247   - <div class="thumbnail">
248   - <a href="clinical-animations-details.html">
249   - <img src="~/../content/images/clinical-animations-8.jpg" alt="" title="">
250   - <div class="caption">
251   - <p>Egg cell production</p>
252   - </div>
253   - </a>
254   - </div>
255   - </div>
256   - <div class="col-sm-3 col-lg-2">
257   - <div class="thumbnail">
258   - <a href="clinical-animations-details.html">
259   - <img src="~/../content/images/clinical-animations-9.jpg" alt="" title="">
260   - <div class="caption">
261   - <p>Electrocardiogram (ECG) - interactive tool</p>
262   - </div>
263   - </a>
264   - </div>
265   - </div>
266   - <div class="col-sm-3 col-lg-2">
267   - <div class="thumbnail">
268   - <a href="clinical-animations-details.html">
269   - <img src="~/../content/images/clinical-animations-10.jpg" alt="" title="">
270   - <div class="caption">
271   - <p>Endocrine glands - general overview</p>
272   - </div>
273   - </a>
274   - </div>
275   - </div>
276   - <div class="col-sm-3 col-lg-2">
277   - <div class="thumbnail">
278   - <a href="clinical-animations-details.html">
279   - <img src="~/../content/images/clinical-animations-11.jpg" alt="" title="">
280   - <div class="caption">
281   - <p>Enlarged prostate gland (BPH)</p>
282   - </div>
283   - </a>
284   - </div>
285   - </div>
286   - <div class="col-sm-3 col-lg-2">
287   - <div class="thumbnail">
288   - <a href="clinical-animations-details.html">
289   - <img src="~/../content/images/clinical-animations-12.jpg" alt="" title="">
290   - <div class="caption">
291   - <p>Fetal development - interactive tool</p>
292   - </div>
293   - </a>
294   - </div>
295   - </div>
296   - </div>
297   - <div role="tabpanel" class="tab-pane" id="list-view">
298   - <div class="col-sm-12 table-responsive ">
299   - <table class="table table-hover table-condensed bg-white">
300   - <thead>
301   - <tr class="active">
302   - <th>Title</th>
303   - <th>Region</th>
304   - <th>System</th>
305   - <th>View</th>
306   - <th>Type</th>
307   - <th>Specialty</th>
308   - </tr>
309   - </thead>
310   - <tbody>
311   - <tr>
312   - <td>1st &amp; 2nd Intercostal Spaces</td>
313   - <td>Thorax</td>
314   - <td>Cardiovascular, Muscular,</td>
315   - <td>Anterior</td>
316   - <td>Cadaver Photograph</td>
317   - <td>&nbsp;</td>
318   - </tr>
319   - <tr>
320   - <td>1st, 3rd, &amp;8th Ribs</td>
321   - <td>Body Wall and Back</td>
322   - <td>Skeletal</td>
323   - <td>Inferior</td>
324   - <td>Cadaver Photograph</td>
325   - <td>&nbsp;</td>
326   - </tr>
327   - <tr>
328   - <td>Abdomen at L5 Vertebra (Inf)</td>
329   - <td>Abdomen</td>
330   - <td>Cardiovascular, Digestive,</td>
331   - <td>Inferior</td>
332   - <td>Illustration</td>
333   - <td>&nbsp;</td>
334   - </tr>
335   - <tr>
336   - <td>1st &amp; 2nd Intercostal Spaces</td>
337   - <td>Thorax</td>
338   - <td>Cardiovascular, Muscular,</td>
339   - <td>Anterior</td>
340   - <td>Cadaver Photograph</td>
341   - <td>&nbsp;</td>
342   - </tr>
343   - <tr>
344   - <td>1st, 3rd, &amp;8th Ribs</td>
345   - <td>Body Wall and Back</td>
346   - <td>Skeletal</td>
347   - <td>Inferior</td>
348   - <td>Cadaver Photograph</td>
349   - <td>&nbsp;</td>
350   - </tr>
351   - <tr>
352   - <td>Abdomen at L5 Vertebra (Inf)</td>
353   - <td>Abdomen</td>
354   - <td>Cardiovascular, Digestive,</td>
355   - <td>Inferior</td>
356   - <td>Illustration</td>
357   - <td>&nbsp;</td>
358   - </tr>
359   - <tr>
360   - <td>1st &amp; 2nd Intercostal Spaces</td>
361   - <td>Thorax</td>
362   - <td>Cardiovascular, Muscular,</td>
363   - <td>Anterior</td>
364   - <td>Cadaver Photograph</td>
365   - <td>&nbsp;</td>
366   - </tr>
367   - <tr>
368   - <td>1st, 3rd, &amp;8th Ribs</td>
369   - <td>Body Wall and Back</td>
370   - <td>Skeletal</td>
371   - <td>Inferior</td>
372   - <td>Cadaver Photograph</td>
373   - <td>&nbsp;</td>
374   - </tr>
375   - <tr>
376   - <td>Abdomen at L5 Vertebra (Inf)</td>
377   - <td>Abdomen</td>
378   - <td>Cardiovascular, Digestive,</td>
379   - <td>Inferior</td>
380   - <td>Illustration</td>
381   - <td>&nbsp;</td>
382   - </tr>
383   - <tr>
384   - <td>1st &amp; 2nd Intercostal Spaces</td>
385   - <td>Thorax</td>
386   - <td>Cardiovascular, Muscular,</td>
387   - <td>Anterior</td>
388   - <td>Cadaver Photograph</td>
389   - <td>&nbsp;</td>
390   - </tr>
391   - <tr>
392   - <td>1st, 3rd, &amp;8th Ribs</td>
393   - <td>Body Wall and Back</td>
394   - <td>Skeletal</td>
395   - <td>Inferior</td>
396   - <td>Cadaver Photograph</td>
397   - <td>&nbsp;</td>
398   - </tr>
399   - <tr>
400   - <td>Abdomen at L5 Vertebra (Inf)</td>
401   - <td>Abdomen</td>
402   - <td>Cardiovascular, Digestive,</td>
403   - <td>Inferior</td>
404   - <td>Illustration</td>
405   - <td>&nbsp;</td>
406   - </tr>
407   - <tr>
408   - <td>1st &amp; 2nd Intercostal Spaces</td>
409   - <td>Thorax</td>
410   - <td>Cardiovascular, Muscular,</td>
411   - <td>Anterior</td>
412   - <td>Cadaver Photograph</td>
413   - <td>&nbsp;</td>
414   - </tr>
415   - <tr>
416   - <td>1st, 3rd, &amp;8th Ribs</td>
417   - <td>Body Wall and Back</td>
418   - <td>Skeletal</td>
419   - <td>Inferior</td>
420   - <td>Cadaver Photograph</td>
421   - <td>&nbsp;</td>
422   - </tr>
423   - <tr>
424   - <td>Abdomen at L5 Vertebra (Inf)</td>
425   - <td>Abdomen</td>
426   - <td>Cardiovascular, Digestive,</td>
427   - <td>Inferior</td>
428   - <td>Illustration</td>
429   - <td>&nbsp;</td>
430   - </tr>
431   - <tr class="active">
432   - <td colspan="6">
433   -
434   - <div class="col-sm-3 col-lg-2 no-padding">
435   - <div class="thumbnail no-margin">
436   - <a href="atlas-anatomy-detail.html">
437   - <img src="~/../content/images/clinical-animations-4.jpg" alt="" title="">
438   -
439   - </a>
440   - </div>
441   - </div>
442   -
443   - </td>
444   -
445   - </tr>
446   - </tbody>
447   - </table>
448   -
449   - </div>
450   - </div>
451   - </div>
452   - </div>
453   -</div>
400-SOURCECODE/AIAHTML5.Web/app/views/ai/ai-view.html
  View file @3c49db6
... ... @@ -16,32 +16,32 @@
16 16 </form>
17 17 <nav>
18 18 <ul class="pagination pagination-sm no-margin">
19   - <li><a href="#" ng-click="ApplySearch('A')">A</a></li>
20   - <li><a href="#" ng-click="ApplySearch('B')">B</a></li>
21   - <li><a href="#" ng-click="ApplySearch('C')">C</a></li>
22   - <li><a href="#" ng-click="ApplySearch('D')">D</a></li>
23   - <li><a href="#" ng-click="ApplySearch('E')">E</a></li>
24   - <li><a href="#" ng-click="ApplySearch('F')">F</a></li>
25   - <li><a href="#" ng-click="ApplySearch('G')">G</a></li>
26   - <li><a href="#" ng-click="ApplySearch('H')">H</a></li>
27   - <li><a href="#" ng-click="ApplySearch('I')">I</a></li>
28   - <li><a href="#" ng-click="ApplySearch('J')">J</a></li>
29   - <li><a href="#" ng-click="ApplySearch('K')">K</a></li>
30   - <li><a href="#" ng-click="ApplySearch('L')">L</a></li>
31   - <li><a href="#" ng-click="ApplySearch('M')">M</a></li>
32   - <li><a href="#" ng-click="ApplySearch('N')">N</a></li>
33   - <li><a href="#" ng-click="ApplySearch('O')">O</a></li>
34   - <li><a href="#" ng-click="ApplySearch('P')">P</a></li>
35   - <li><a href="#" ng-click="ApplySearch('Q')">Q</a></li>
36   - <li><a href="#" ng-click="ApplySearch('R')">R</a></li>
37   - <li><a href="#" ng-click="ApplySearch('S')">S</a></li>
38   - <li><a href="#" ng-click="ApplySearch('T')">T</a></li>
39   - <li><a href="#" ng-click="ApplySearch('U')">U</a></li>
40   - <li><a href="#" ng-click="ApplySearch('V')">V</a></li>
41   - <li><a href="#" ng-click="ApplySearch('W')">W</a></li>
42   - <li><a href="#" ng-click="ApplySearch('X')">X</a></li>
43   - <li><a href="#" ng-click="ApplySearch('Y')">Y</a></li>
44   - <li><a href="#" ng-click="ApplySearch('Z')">Z</a></li>
  19 + <li><a href="#" ng-click="ApplySearchByAlphabet('A')">A</a></li>
  20 + <li><a href="#" ng-click="ApplySearchByAlphabet('B')">B</a></li>
  21 + <li><a href="#" ng-click="ApplySearchByAlphabet('C')">C</a></li>
  22 + <li><a href="#" ng-click="ApplySearchByAlphabet('D')">D</a></li>
  23 + <li><a href="#" ng-click="ApplySearchByAlphabet('E')">E</a></li>
  24 + <li><a href="#" ng-click="ApplySearchByAlphabet('F')">F</a></li>
  25 + <li><a href="#" ng-click="ApplySearchByAlphabet('G')">G</a></li>
  26 + <li><a href="#" ng-click="ApplySearchByAlphabet('H')">H</a></li>
  27 + <li><a href="#" ng-click="ApplySearchByAlphabet('I')">I</a></li>
  28 + <li><a href="#" ng-click="ApplySearchByAlphabet('J')">J</a></li>
  29 + <li><a href="#" ng-click="ApplySearchByAlphabet('K')">K</a></li>
  30 + <li><a href="#" ng-click="ApplySearchByAlphabet('L')">L</a></li>
  31 + <li><a href="#" ng-click="ApplySearchByAlphabet('M')">M</a></li>
  32 + <li><a href="#" ng-click="ApplySearchByAlphabet('N')">N</a></li>
  33 + <li><a href="#" ng-click="ApplySearchByAlphabet('O')">O</a></li>
  34 + <li><a href="#" ng-click="ApplySearchByAlphabet('P')">P</a></li>
  35 + <li><a href="#" ng-click="ApplySearchByAlphabet('Q')">Q</a></li>
  36 + <li><a href="#" ng-click="ApplySearchByAlphabet('R')">R</a></li>
  37 + <li><a href="#" ng-click="ApplySearchByAlphabet('S')">S</a></li>
  38 + <li><a href="#" ng-click="ApplySearchByAlphabet('T')">T</a></li>
  39 + <li><a href="#" ng-click="ApplySearchByAlphabet('U')">U</a></li>
  40 + <li><a href="#" ng-click="ApplySearchByAlphabet('V')">V</a></li>
  41 + <li><a href="#" ng-click="ApplySearchByAlphabet('W')">W</a></li>
  42 + <li><a href="#" ng-click="ApplySearchByAlphabet('X')">X</a></li>
  43 + <li><a href="#" ng-click="ApplySearchByAlphabet('Y')">Y</a></li>
  44 + <li><a href="#" ng-click="ApplySearchByAlphabet('Z')">Z</a></li>
45 45 </ul>
46 46 <button type="button" class="btn btn-primary btn-sm" ng-click="Reset(query)" style = "margin-bottom:23px"><i class="fa fa-eye"></i>Show All</button>
47 47 </nav>
... ...