HTML:
http://www.ngnice.com/showcase/#/tree/basic
<link rel="stylesheet" href="views/tree/basic.css"/> <div class="tree"> <ul> <li ng-repeat="country in vm.countries" ng-class="{closed:country.closed}"> <div ng-click="country.closed=!country.closed"> <span class="glyphicon" ng-class="country.closed?'glyphicon-plus':'glyphicon-minus'"></span> <img ng-src="images/{{country.flag}}"/> {{country.label}} </div> <ul ng-class="{hidden: country.closed}"> <li ng-repeat="province in country.provinces" ng-class="{closed:province.closed}"> <div ng-click="province.closed=!province.closed"> <span class="glyphicon" ng-class="province.closed?'glyphicon-plus':'glyphicon-minus'"></span> {{province.label}} </div> <ul ng-class="{hidden: province.closed}"> <li ng-repeat="city in province.cities" ng-click="vm.select(country, province, city)"> {{city.label}} </li> </ul> </li> </ul> </li> </ul> </div> <div ng-if="vm.city">國家：<img ng-src="images/{{vm.country.flag}}">{{vm.country.label}} 省份：{{vm.province.label}} 城市：{{vm.city.label}} </div>
CSS:
.tree li { cursor: pointer; padding-left: 1.3em; } .tree ul { list-style: none; padding-left: 0; }
JS:
'use strict'; angular.module('ngShowcaseApp').controller('ctrl.tree.basic', function ($scope, CityData) { var vm = $scope.vm = {}; vm.countries = CityData; vm.select = function(country, province, city) { vm.country = country; vm.province = province; vm.city = city; }; });
http://www.ngnice.com/showcase/#/tree/basic
<link rel="stylesheet" href="views/tree/basic.css"/> <div class="tree"> <ul> <li ng-repeat="country in vm.countries" ng-class="{closed:country.closed}"> <div ng-click="country.closed=!country.closed"> <span class="glyphicon" ng-class="country.closed?'glyphicon-plus':'glyphicon-minus'"></span> <img ng-src="images/{{country.flag}}"/> {{country.label}} </div> <ul ng-class="{hidden: country.closed}"> <li ng-repeat="province in country.provinces" ng-class="{closed:province.closed}"> <div ng-click="province.closed=!province.closed"> <span class="glyphicon" ng-class="province.closed?'glyphicon-plus':'glyphicon-minus'"></span> {{province.label}} </div> <ul ng-class="{hidden: province.closed}"> <li ng-repeat="city in province.cities" ng-click="vm.select(country, province, city)"> {{city.label}} </li> </ul> </li> </ul> </li> </ul> </div> <div ng-if="vm.city">國家：<img ng-src="images/{{vm.country.flag}}">{{vm.country.label}} 省份：{{vm.province.label}} 城市：{{vm.city.label}} </div>
CSS:
.tree li { cursor: pointer; padding-left: 1.3em; } .tree ul { list-style: none; padding-left: 0; }
JS:
'use strict'; angular.module('ngShowcaseApp').controller('ctrl.tree.basic', function ($scope, CityData) { var vm = $scope.vm = {}; vm.countries = CityData; vm.select = function(country, province, city) { vm.country = country; vm.province = province; vm.city = city; }; });