アングラーコマンドメニューの例

3714 ワード

JavaScript アングラーJS

.
ポイントを変更したら権限メニューの例に変更できます.


<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap-combined.min.css">
<script type="text/javascript" src="../angular.js"></script>
<script type="text/javascript" src="../angular-resource.js"></script>
<script type="text/javascript">
var myApp =angular.module('components', ['ngResource']);
myApp.controller("myCtrl", function($scope,$resource) {
 	$scope.pdivs = [];
    $scope.msg = "grapecity team blog";
    var res=$resource('/ng/menu.txt/:userId', {userId:'@id'});
    res.get({id:'123'}, function(data){
    	console.log("controller--res:"+data.user_id+" "+data.menu);
    	$scope.pdivs=data.menu;
    }, function(err){console.log(err);});
});
myApp.directive('tabs', function($resource) { 
	var this_res=$resource;
    return { 
      restrict: 'E', 
      transclude: true, 
      scope: {}, 
      controller: [ "$scope", function($scope) { 
        var panes = $scope.panes = []; 
        $scope.select = function(pane) { 
          angular.forEach(panes, function(pane) { 
            pane.selected = false; 
          }); 
          pane.selected = true; 
        } 
        this.addPane = function(pane) { 
          if (panes.length == 0) $scope.select(pane); 
          panes.push(pane); 
          console.log("panes.size:"+panes.length);
        } 
      }], 
      template: 
        '<div class="tabbable">' + 
          '<ul class="nav nav-tabs">' + 
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ 
              '<a href="" ng-click="select(pane)">{{pane.title}}</a>' + 
            '</li>' + 
          '</ul>' + 
          '<div class="tab-content" ng-transclude></div>' + 
        '</div>', 
      replace: true 
    }; 
  });
myApp.directive('pane', function() { 
    return { 
      require: '^tabs', 
      restrict: 'E', 
      transclude: true, 
      scope: { title: '@' }, 
      link: function(scope, element, attrs, tabsCtrl) { 
        tabsCtrl.addPane(scope); 
      }, 
      template: 
        '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' + 
        '</div>', 
      replace: true 
    }; 
  })
</script>
</head>
<body ng-app="components" ng-controller="myCtrl"> 
  <h3>BootStrap Tab Component {{}}</h3> 
  <tabs> 
    <pane title="{{pdiv.name}}" ng-repeat="pdiv in pdivs"> 
      <div  >This is the content of the first tab.</div> 
    </pane> 

  </tabs> 
</body>
</html>

resourceで使うmenu.txtは


{
"user_id":123,
"menu":[{"name":"menu1"},{"name":"menu2"},{"name":"menu3"}]
}

angglar-reource.js
angglar.js公式サイトからダウンロードします.
bootstrap-commbined.min.cssも公式サイトでお願いします.

ドロップダウン枠内にツリーが表示されます.