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

Question

4.00/5 (1 vote)

See more:

I have this fiddle http://jsfiddle.net/sheko_elanteko/Anj3w/9/[^]

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 ...

JavaScript

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?

Posted 26-Jun-14 5:46am

Shaker Hamdi

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vindhyachal_Kumar · Answer 1 · 2014-07-29T02:56:00

Use the below code

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
    <script type="text/javascript">
        var app_data = {
            price_filters: [{
                "value": 100000,
                "section": 1
            }, {
                "value": 250000,
                "section": 1
            }, {
                "value": 500000,
                "section": 1
            }, {
                "value": 750000,
                "section": 1
            }, {
                "value": 1000000,
                "section": 1
            }, {
                "value": 2000000,
                "section": 1
            }, {
                "value": 5000000,
                "section": 1
            }, {
                "value": 500,
                "section": 2
            }, {
                "value": 1000,
                "section": 2
            }, {
                "value": 2000,
                "section": 2
            }, {
                "value": 3000,
                "section": 2
            }, {
                "value": 4000,
                "section": 2
            }, {
                "value": 6000,
                "section": 2
            }, {
                "value": 10000,
                "section": 2
            }, {
                "value": 20000,
                "section": 2
            }, {
                "value": 50000,
                "section": 2
            }, ]
        };

        var app = angular.module('App', []);
        var arr = app_data.price_filters;

        app.controller('MainCtrl', function ($scope) {
            $scope.mins = [];
            $scope.maxs = [];

            $scope.getMxRange = function () {
                var priceArr = [];
                if ($scope.minVal) {
                    angular.forEach($scope.maxs, function (maxVal) {
                        if ($scope.minVal < maxVal) {
                            this.push(maxVal);
                        }
                    }, priceArr);
                }
                else {
                    priceArr = $scope.maxs;
                }
                return priceArr;
            };

            $scope.$watch('sectionSelect', function () {
                var newArr = [];
                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']);
                        }
                    }
                }

                $scope.mins = newArr;
                $scope.maxs = newArr;

            });

        });

    </script>
</head>
<body ng-app="App">
    <div ng-controller="MainCtrl">
        <form action="#">
        <select ng-model="sectionSelect" ng-init="sectionSelect = 1">
            <option value="11">11</option>
            <option value="1">For Sale</option>
            <option value="2">For Rent</option>
        </select>
        <select ng-model="minVal">
            <option ng-repeat="min in mins" value="{{min}}">{{min}}</option>
        </select>
        <select>
            <option ng-repeat="max in getMxRange()" value="{{max}}">{{max}}</option>
        </select>
        </form>
    </div>
</body>
</html>