AngularJS RzSlider: How do I default to, if rz-slider-model is undefined or null?

Question

I am using the Range Slider from RzSlider v2.0.1 in my application, where the rz-slider-model value can be either undefined or with an int value.

Below is my HTML template

<tr ng-repeat="feature in categories">
     <td>
      {{feature.featureName}}                                    
      <rzslider rz-slider-model="feature.slider.selectedMin" rz-slider-high="feature.slider.selectedMax" rz-slider-options="{floor:feature.slider.min, ceil:feature.slider.max, onChange: editor.slideChange(categoryId,  feature.value, feature.slider.selectedMin, feature.slider.selectedMax)}"></rzslider>
     </td>
</tr>

And the model value can be anything like these

[{
     "slider": {
         "min": 0,
         "max": 10,
         "selectedMin": 2,
         "selectedMax": 4
        },
       "value": "1",
       "featureName": "Fuel"
},
{
     "slider": {
         "max": 10,
         "selectedMin": null,
         "selectedMax": 5
        },
       "value": "2",
       "featureName": "Large"
}]

Now, how can I default rz-slider-model value to 0 if my JSON object from API returns as null.

I tried setting something like rz-slider-model='feature.slider.selectedMin || 0' but getting an exception while changing the slider value like Error: [$compile:nonassign] Expression 'feature.slider.selectedMin || 0' used with directive 'rzslider' is non-assignable!

You can find the sample code here

Please help!

score 0 · Answer 1 · answered May 23 '17 at 08:27

Without any further research to RzSlider the rz-slider-model has to be non-assignable to offer 2-way data-binding. This means you can't use a filter (which is what you are trying to do i think?)

The expression feature.slider.selectedMin || 0 is using the logical OR. Depending on selectedMin, it is evaluated to true/false, which is not a model the directive can work with.

I suggest you simply filter your array in your controller by injecting $filter How to use filter in controller or simply loop the array in the controller.

Example loop:

   vm.myApiResponse.forEach(function(item) {
           if(item.selectedMin == null) item.selectedMin = 0;
           if(item.selectedMax == null) item.selectedMax = 0;
          //any property which shouldn't be null
      });

AngularJS RzSlider: How do I default to, if rz-slider-model is undefined or null?

1 Answers1