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
Post a Comment