Angularjs filtering values based on selected option

Question

Hi I am trying to display certain values based on option selected in a drop down. My code is data is

[{"city":"New York","location":"123"},
{"city":"Chicago","location":"953"}
{"city":"New York","location":"788"}
{"city":"Chicago","location":"853"}]

Code is

<form name="test" class="form-horizontal">
        <div class="from-group container">
            <label for="abc" class="col-sm-2">City</label>
            <div class="col-sm-10">
                <select class="form-control" ng-model="cc">
                    <option ng-repeat="city in cities" value="city.value">{{city.name}}</option>
                </select>
            </div>
            <ul>
                <li ng-repeat="att in cities">{{att.locations | filter:cc}} ></li>
            </ul>
        </div>
</form>

With above code I have two problems. 1. As I select different options in the drop down it wont filter for that city name. 2. When the file is first loaded it will display all the locations Please let me know how to fix this code so when I select an option it lists all the locations filtering based on the city name. Thanks

Can you show us what your data looks like? What does att.locations look like, for instance? is it a string? Or an array? Some sample data would be nice to help understand what you are trying to achieve. — Brian Genisio
– Brian Genisio, Commented Jan 29, 2014 at 1:50

hassassin · Accepted Answer · 2014-01-29 02:23:54Z

3

angular has a really cool feature where you can filter directly in your ng-repeat.

I've set up a fiddle where you can see this in action. Basically you set an object (cc) based on the select and then use:

<div ng-repeat="city in data | filter:cc">

Hope this helped.

answered Jan 29, 2014 at 2:23

hassassin

5,0641 gold badge32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs filtering values based on selected option

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related