简体   繁体   English

AngularJS使用选择值过滤列表数据

[英]Angularjs filter list data using select value

I've json data in following format: { "id": "mypics-1", "imageThumbUrl": "img/small/1.jpg", "imageUrl": "img/large/1.jpg", "name": "1.jpg", "type": "imgage" }, { "id": "mypics-2", "imageThumbUrl": "img/small/2.jpg", "imageUrl": "img/large/2.jpg", "name": "2.jpg", "type": "image" } 我有以下格式的json数据:{“ id”:“ mypics-1”,“ imageThumbUrl”:“ img / small / 1.jpg”,“ imageUrl”:“ img / large / 1.jpg”,“名称“:” 1.jpg“,” type“:” imgage“},{” id“:” mypics-2“,” imageThumbUrl“:” img / small / 2.jpg“,” imageUrl“:” img / large /2.jpg”,“名称”:“ 2.jpg”,“类型”:“图像”}

I need to filter image list on type base if user selects the selects a value from drop down. 如果用户从下拉列表中选择一个值,则需要基于类型过滤图像列表。 My code is as follows. 我的代码如下。 I tried many ways but it didn't filtering data, rather it empties the list. 我尝试了很多方法,但是它没有过滤数据,而是清空了列表。

                        <select ng-model="showGenre">
                            <option value=" " selected>All</option>
                            <option ng-repeat="type in ImageTypes" value="{{type.name}}">{{type.name}}</option>
                        </select>
                        <div class="myPicsDivCls">
                            <ul id="carousel2" class="elastislide-list">
                                <li ng-repeat="ImageFile in ImageFiles | filter: {type:showGenre}">
                                    <a>
                                        <img ng-src="{{ImageFile.imageThumbUrl}}" data-echo="{{ImageFile.imageThumbUrl}}" alt="image06" />
                                    </a>
                                </li>
                            </ul>
                        </div> 

try 尝试

<li ng-repeat="ImageFile in ImageFiles | filter: showGenre">

//----------EDIT-----------// try // ----------编辑----------- //试试

<li ng-repeat="ImageFile in ImageFiles | showGenre">

//----------EDIT----------------// change // ---------- EDIT ---------------- //更改

<option value=" " selected>All</option>

to

 <option value="" selected>All</option>

i think is due to that 我认为是由于

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM