javascript - Make data list visible only when user type in search field -


i new ionic frame work , javascript have problems create functionality first app. studding course building aapp angular.js. want explore more , add functionality test app practice. here example of app example right list data pre-loaded. want tochange data load when user starts type in search field. tried couple things added id="search" input

<label class="item-input-wrapper">     <i class="icon ion-search placeholder-icon"></i>     <input id="search" type="search" ng-model="query" placeholder="search">   </label> 

and checking input field , tried 2 different ways: 1)

.controller('listcontroller', ['$scope', '$http', '$state',               function($scope, $http, $state) {                    var query = document.getelementbyid('search');                  if(query.value.length > 0) {                         $http.get('js/data.json').success(function(data) {                              $scope.artists = data.artists;               });           };     }]); 

this 1 looks don't break code, meaning header (title, menu , delete buttons) visible. when type in search field data not showing.

2)

.controller('listcontroller', ['$scope', '$http', '$state', '$query',                   function($scope, $http, $state, $query) {                      if($query.value.length > 0) {                             $http.get('js/data.json').success(function(data) {                                  $scope.artists = data.artists;                   });               };         }]); 

this example looks braking code header not visible more looks not passing new parameter $query. if 1 point me doing wrong appreciate . thank time.

you can access ng-model in controller without jquery, use

.controller('listcontroller', ['$scope', '$http', '$state',   function($scope, $http, $state) {     $scope.$watch("query.length", function(val) {       if (val > 0) {        $http.get('js/data.json').success(function(data) {          $scope.artists = data.artists;        });       }    });  } ]); 

Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -