CODEWITHSUNDEEP
javascriptangularjsselectfilter
Ruby
Ruby

Reputation: 2909

watch the selected value of dropdown with angularjs to populate an array depends on the selected value

I have this fiddle HERE

I want to check for the selected value of the model "sectionSelect", and based on the selected value, weather it's "1" or "2", I want to fill the newArr with the new values that match the selected, in order to filter the min and max prices accordingly.

What I'm doing right now is this ...

if ($scope.sectionSelect == 1) {

    for($i=0; $i < arr.length; $i++){

        if(arr[$i]['section'] === 1) {
            newArr.push(arr[$i]['value']);
        }
    }

} else if($scope.sectionSelect == 2) {
    for($i=0; $i < arr.length; $i++){

        if(arr[$i]['section'] === 2) {
            newArr.push(arr[$i]['value']);
        }
    }
}

But that doesn't seem to work. What should I do?

This is what I have and it's working http://jsfiddle.net/sheko_elanteko/Anj3w/26/ I just want to add the filter functionality to it.

Upvotes: 0

Views: 2265

Answers (1)

andrew.burk
andrew.burk

Reputation: 533

The easiest way to filter things using Angular is to use the built in filtering capabilities. I updated your fiddle here: http://jsfiddle.net/CQyTa/

The changes to the html use the dropdowns to set scope values for what is selected. These values can then be used as filters (in this instance, I'm filtering the min and max values based on the which section is selected).

<select ng-model="sectionSelect" ng-options="section.label for section in sections" ng-change="clearMinMax()">
</select>
<select ng-model="minVal" ng-options="item.value for item in app_data | filter:sectionSelect.section | orderBy:'value'">
    <option value="">Min Price</option>
</select>
<select ng-model="maxVal" ng-options="item.value for item in app_data | filter: sectionSelect.section | orderBy:'-value'">
    <option value="">Max Price</option>
</select>

Based on what is selected in those dropdowns, you can these use all of those to filter what should show up. The minMax function is in the controller, it just checks whether the value is between the min & max.

<div ng-repeat="item in app_data | filter:sectionSelect.section | filter:minMax | orderBy:'value'">
    {{item.value}}
</div>

Let me know if you have any questions!

Upvotes: 1

Related Questions