基于所选选项的Angularjs过滤值 [英] Angularjs filtering values based on selected option

问题描述

您好，我正在尝试根据下拉列表中选择的选项显示某些值.我的代码是数据是

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

代码是

<div class="from-group container"><label for="abc" class="col-sm-2">城市</label><div class="col-sm-10"><select class="form-control" ng-model="cc"><option ng-repeat="城市中的城市" value="city.value">{{city.name}}</option></选择>

<ul><li ng-repeat="att in city">{{att.locations |过滤器:cc}} ></li>

</表单>

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

解决方案

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

我已经设置了一个 fiddle，您可以在其中看到它的实际效果.基本上你根据选择设置一个对象(cc)然后使用:

希望这有帮助.

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

解决方案

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.

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