Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
  <!DOCTYPE html>
<html ng-app="com.ngbook.demo">
<head>
<meta name="description" content="ng trrview example">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://greengerong.github.io/self/cdn/angular.js"></script>
</head>
<body >
     <div ng-controller="DemoController as demo" class="container">
​
         
       <div class="row">
           <h2>Tree view</h2>
           <tree-view tree-data="demo.tree" text-field="name" value-field='id' item-clicked="demo.itemClicked($item)" item-checked-changed="demo.itemCheckedChanged($item)" can-checked="true" ></tree-view>
       </div>
    
    <div class="row">
      <h2>Item selected</h2>
        <pre>{{demo.selectedItem | json}}</pre>
    </div>
         
    <script type="text/ng-template" id="/treeView.html">
        <ul class="tree-view">
               <li ng-repeat="item in treeData" ng-include="itemTemplateUrl || '/treeItem.html'" ></li>
           </ul>
    </script>
    
    <script type="text/ng-template" id="/treeItem.html">
    <i ng-click="itemExpended(item, $event);" class="{{getItemIcon(item)}}"></i>
​
      <input type="checkbox" ng-model="item.$$isChecked" class="check-box" ng-if="canChecked" ng-change="warpCallback('itemCheckedChanged', item, $event)">
​
​
        <span class='text-field' ng-click="warpCallback('itemClicked', item, $event);">{{item[textField]}}</span>
        <ul ng-if="!isLeaf(item)"
        ng-show="item.$$isExpend"
        >
           <li ng-repeat="item in item.children" ng-include="itemTemplateUrl || '/treeItem.html'">
           </li>
       </ul>
    </script>
         
    </div>
</body>
</html>
 
ul{
    list-style: none;
}
.text-field{
    cursor: pointer;
}
.check-box{
    width: 24px;
    height: 18px;
    border-radius: 8px;
}
 
 angular.module("com.ngbook.demo", [])
    .controller("DemoController", ['$http',function($http){
      var vm = this;
      vm.tree = [
   {
      "id":"1",
      "pid":"0",
      "name":"家用电器",
      "children":[
         {
            "id":"4",
            "pid":"1",
            "name":"大家电",
            "children":[
               {
                  "id":"7",
                  "pid":"4",
                  "name":"空调",
                  "children":[
                     {
                        "id":"15",
                        "pid":"7",
                        "name":"海尔空调"
                     },
                     {
                        "id":"16",
                        "pid":"7",
                        "name":"美的空调"
                     }
                  ]
               },
               {
                  "id":"8",
                  "pid":"4",
                  "name":"冰箱"
               },
               {
                  "id":"9",
                  "pid":"4",
                  "name":"洗衣机"
               },
               {
                  "id":"10",
                  "pid":"4",
                  "name":"热水器"
               }
            ]
         },
         {
            "id":"5",
            "pid":"1",
            "name":"生活电器",
            "children":[
               {
                  "id":"19",
                  "pid":"5",
                  "name":"加湿器"
               },
               {
                  "id":"20",
                  "pid":"5",
                  "name":"电熨斗"
               }
            ]
         }
      ]
   },
   {
      "id":"2",
      "pid":"0",
      "name":"服饰",
      "children":[
         {
            "id":"13",
            "pid":"2",
            "name":"男装"
         },
         {
            "id":"14",
            "pid":"2",
            "name":"女装"
         }
      ]
   },
   {
      "id":"3",
      "pid":"0",
      "name":"化妆",
      "children":[
         {
            "id":"11",
            "pid":"3",
            "name":"面部护理"
         },
         {
            "id":"12",
            "pid":"3",
            "name":"口腔护理"
         }
      ]
   }
];
        
    vm.itemClicked = function ($item) {
        vm.selectedItem = $item;
        console.log($item, 'item clicked');
    };
    
    vm.itemCheckedChanged = function($item){
        $http.post('/url', $item);
        console.log($item,'item checked');
    };
                
      return vm;
    }])
     .directive('treeView',[function(){
     
     return {
          restrict: 'E',
          templateUrl: '/treeView.html',
          scope: {
              treeData: '=',
              canChecked: '=',
              textField: '@',
              itemClicked: '&',
              itemCheckedChanged: '&',
              itemTemplateUrl: '@'
          },
         controller:['$scope', function($scope){
             $scope.itemExpended = function(item, $event){
                 item.$$isExpend = ! item.$$isExpend;
                 $event.stopPropagation();
             };
             
             $scope.getItemIcon = function(item){
                 var isLeaf = $scope.isLeaf(item);
                 
                 if(isLeaf){
                     return 'fa fa-leaf';
                 }
                 
                 return item.$$isExpend ? 'fa fa-minus': 'fa fa-plus';   
             };
             
             $scope.isLeaf = function(item){
                return !item.children || !item.children.length; 
             };
             
             $scope.warpCallback = function(callback, item, $event){
                  ($scope[callback] || angular.noop)({
                     $item:item,
                     $event:$event
                 });
             };
         }]
     };
 }]);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
greengerongpro
0viewers