zoukankan      html  css  js  c++  java
  • angular 基本树结构

    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; }; });

     

     

  • 相关阅读:
    整数划分递归模板
    最近点对算法模板
    计算几何模板
    poj1269---直线位置关系
    poj1017----模拟
    MVC 提交List 集合 注意对应的参数名称
    使用 WebClient 來存取 GET,POST,PUT,DELETE,PATCH 網路資源
    对路径访问拒绝,要加上具体filename/c.png
    sql 列集合
    百度地图 Infowidow 内容(content 下标签) 点击事件
  • 原文地址:https://www.cnblogs.com/bmaker/p/5751515.html
Copyright © 2011-2022 走看看