I am currently working on an Ionic project where you can search for some used cars. The app also includes some filters with range sliders to set the values as follows:
My problem now is that the filters are set to a default value on startup which would be:
user_settings = {price: {min: 0, max: 200000}}
Which is used in a jade file:
.item.range.range-positive
input(type="range", min="{{filter.range.min}}", max="{{filter.range.max}}", step = "{{filter.range.step}}", ng-model="user_settings[filter.id].max", id= "handle")
Resetting this value works fine and puts the sliders to 0 and 200000. But on startup the sliders remain like this:
I did already understand that the sliders are first set when opening up the filters and before the DOM elements are nil. But when i open up the filters the DOM is evaluated but the value is set to 100 and not to the ng-models value.
I tried ng-init and reloading the scope but this just didn't work...
Is there anyway to create all the DOM elements on startup?
EDIT 1:
Here is the controller code that starts the application:
angular.module("starter.controllers", [])
.controller "AppCtrl", ($scope, $ionicModal, $timeout, FilterService, $state) ->
$scope.filters = FilterService.settings
$scope.sort = FilterService.user_settings['sort']
$scope.resetFilters = ->
FilterService.resetFilters()
$state.go('app.cars', {}, {reload: true})
$scope.resetFilters()
Where resetFilters() calls following code:
initial value of user_settings:
user_settings = {sort: {attribute: 'offerPrice', direction: 'asc'}, price:{}, firstregistration:{}, power_ps:{},mileage:{}, emission:{}}
Code to resetFilters:
resetFilter: (filter) ->
if filter.id in ['price', 'firstregistration', 'power_ps', 'mileage', 'emission']
user_settings[filter.id].min = filter.range.min
user_settings[filter.id].max = filter.range.max
else
delete user_settings[filter.id]
resetFilters: ->
console.log(user_settings)
for filter_name, user_setting of user_settings
if filter_name == 'sort'
continue
@resetFilter(@find(filter_name))
And the filter object contains the min and max values hardcoded.
Hope that helps to clarify...