栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

AngularJS使用下拉列表过滤数据

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

AngularJS使用下拉列表过滤数据

您可以像我的解决过程一样解决此问题:我的解决方案就像您的问题。首先显示 区域* 列表,然后根据 所选区域 显示 塔纳 列表。使用
过滤器 表达式
***

在HTML中:

<div>        <form > <div >     <div ><label><i ></i> District List</label></div>     <div >         <select  ng-model="selectedDist" ng-options="district.name for district in districts">  <option value="">Select</option>         </select>     </div> </div> <div >     <div ><label><i ></i> Thana List</label></div>     <div >         <select  ng-model="selectedThana" ng-options="thana.name for thana in thanas | filter: filterexpression">  <option value="">Select</option>         </select>     </div> </div>        </form>    </div>

在控制器中:

 $scope.selectedDist={}; $scope.districts = [     {id: 1, name: 'Dhaka'},     {id: 2, name: 'Goplaganj'},     {id: 3, name: 'Faridpur'} ]; $scope.thanas = [     {id: 1, name: 'Mirpur', dId: 1},     {id: 2, name: 'Uttra', dId: 1},     {id: 3, name: 'Shahabag', dId: 1},     {id: 4, name: 'Kotalipara', dId: 2},     {id: 5, name: 'Kashiani', dId: 2},     {id: 6, name: 'Moksedpur', dId: 2},     {id: 7, name: 'Vanga', dId: 3},     {id: 8, name: 'faridpur', dId: 3} ]; $scope.filterexpression = function(thana) {     return (thana.dId === $scope.selectedDist.id ); };

注意: 此处 filterexpression 是一个自定义函数,当所选区域id等于thana中的dId时,返回值。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/386037.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号