javascript - 怎么用angularJS来实现下图的二级联动啦？

Question

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

Answer 1

省份城市的数据结构如下图：

html代码：

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

js代码

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

Answer 2

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

Answer 3

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

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