AngularJS根据所选选项过滤值 [英] Angularjs filtering values based on selected option

问题描述

您好，我想根据下拉菜单中选择的选项显示某些值. 我的代码是 数据是

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"}]

代码为

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

使用上面的代码，我有两个问题. 1.当我在下拉菜单中选择其他选项时，它不会过滤该城市名称. 2.首次加载文件时，它将显示所有位置 请让我知道如何解决此代码，因此，当我选择一个选项时，它将列出所有基于城市名称过滤的位置. 谢谢

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

推荐答案

angular具有非常酷的功能，您可以在ng-repeat中直接进行过滤.

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

我已经设置了小提琴，您可以在其中看到实际效果.基本上，您基于选择设置对象(cc)，然后使用:

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

希望这会有所帮助.

这篇关于AngularJS根据所选选项过滤值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！