怎么用angularJS来实现下图的二级联动啦?

想用angularJS快速实现下图的功能:当鼠标移入省的时候,显示对应省的城市,请大伙多多指点!
clipboard.png

阅读 4.1k
3 个回答

省份城市的数据结构如下图:
图片描述

html代码:

<div class="selfinfo-list">
    <ul ng-if="chooseProvince">
        <li ng-repeat="provinceItem in provinceList" ng-click="provinceClick($index, provinceItem.code, provinceItem.name)">
            <div class="tit-l" id="{{provinceItem.code}}" ng-bind="provinceItem.name"></div>
        </li>
    </ul>
    <ul ng-if="chooseCity">
        <li ng-repeat="cityItem in citys" ng-click="cityClick(cityItem.code, cityItem.name)">
            <div class="tit-l" id="{{cityItem.code}}" ng-bind="cityItem.name"></div>
        </li>
    </ul>
</div>

js代码

/**
  * 省份点击
  */
$scope.provinceClick = function (index, code, name) {
    $scope.chooseProvince = false;             // 隐藏省份
    $scope.chooseCity = true;                  // 显示城市    
    $scope.citys = $scope.provinceList[index].child;
};

boostrap就可以啦,这种插件网上搜一大堆

用控件也行,自己写也行。自己写的好维护一点,能根据自己的数据结构来控制。

首先肯定得有级联的数据结构,估计你现在已经有了。
第二个选择框开始是隐藏的。第一个你显示不显示都可以,按自己意愿。用ng-show来控制就行。
当在第一个选择框选了某一项之后,把子选项填充到第二个选择框的集合(数组),并让第二个选择框显示出来。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题