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

Answer 1

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.