ng.html
改好点可以改成权限菜单的例子，
<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"}]
}
angular-resource.js
angular.js官网下载吧
bootstrap-combined.min.css也官网下吧
分享到：
相关推荐
Angular2的核心组件包括模块（Module）、组件（Component）、指令（Directives）、服务（Services）、管道（Pipes）和依赖注入（Dependency Injection）。在"Tour of Heroes"中，你会看到如何定义和使用这些核心概念...
在AngularJS中，指令是用于扩展HTML...在这个例子中，我们学会了如何创建一个自定义的下拉框指令，它能够动态地从控制器获取数据，显示选项，并能双向绑定选中的值。这种能力对于构建复杂且可复用的前端应用至关重要。
Angular指令分为三类：结构指令、属性指令和组件。结构指令如*ngIf和*ngFor改变DOM的结构；属性指令如ngClass和ngStyle修改元素的属性；组件则是可重用的自包含视图。在"ng2-bs"项目中，我们主要关注的是属性指令，...
`angular-birthdaypicker`指令就是一个这样的例子，它可以将普通的HTML元素转化为生日选择器。通过使用自定义的指令，开发者可以在任何需要的地方插入生日选择器，而无需编写大量的DOM操作代码。 在JavaScript中，...
1. **Angular指令**： Angular指令是扩展HTML能力的核心机制，它们可以用来封装复杂的功能并重用。在这个实例中，我们创建了一个名为`multiSelect`的自定义指令，它负责渲染多选复选框的列表。 2. **模板...
在实际的前端项目中，Angular-ui-select常用于创建复杂的表单、筛选器或自定义的下拉菜单。例如，在一个电子商务网站的商品筛选页面，用户可以选择不同的分类、价格范围等，这时Angular-ui-select的搜索和过滤功能就...
在这个例子中，`ng-click` 指令绑定了 `navigateTo` 方法，当用户点击导航项时会执行该方法。 `index.js` 文件中，我们创建了一个名为 `frameApp` 的应用模块，并引入了 `header` 模块。`frameCtrl` 控制器被定义在...
在这个例子中，`div`可能被用作菜单容器，包含了所有的菜单项。通过CSS，我们可以将这个`div`元素定位到页面的右上角，并为其添加相应的样式，比如背景色、边距、 padding等。 为了实现菜单的交互功能，JavaScript...
在"angularjs 子模块实战例子 （切换效果）"的场景中，可能涉及到的是一种基于用户交互的页面元素动态切换效果，比如导航菜单或卡片视图。这种效果通常通过控制器和指令协同工作来实现。子模块可以帮助我们更好地...
最后，我们使用`ng-repeat`指令动态生成每个下拉菜单的选项。`ng-model`指令用于跟踪当前选定的值。 通过这种方式，我们可以创建一个基于Angular的三级联动生日插件，用户可以在选择年份、月份和日期时获得即时反馈...
2. **指令使用**：Angular的内置指令如`ngFor`和`ngIf`可以用于动态渲染链接和条件显示。 3. **事件处理**：点击链接时，可以触发自定义事件，以便父组件能够监听并响应这些事件。 4. **样式定制**：组件可能允许...
1. `*ngIf`指令：这是一个Angular的结构指令，用于根据表达式的值决定元素是否应该出现在DOM中。在例子中，`*ngIf="!isShow"` 用于控制`<ion-list>`是否显示。`isShow`是一个布尔变量，初始值为`false`，当点击图标...
虽然直接使用`change`事件可以工作，但在Angular中，更推荐使用`ngModel`指令进行双向数据绑定。这样不仅可以监听事件，还可以让视图和组件类之间的数据状态保持同步。`ngModel`指令与`(ngModelChange)`事件一起使用...
创建自定义指令可以通过`angular.directive()`函数实现。下面是一个简单的例子，展示如何创建一个处理点击事件的指令： ```javascript angular.module('myApp').directive('myClickHandler', function() { return ...
在这个例子中，我们使用`*ngIf`指令根据`userInfo.userInfo`的状态来决定导航菜单是否显示。这样，当我们在应用的任何地方改变`userInfo.userInfo`的值时，导航菜单的显示状态也会相应更新。 总的来说，虽然Angular...
1. **离子组件（Ionic Components）**：Ionic 提供了一系列的UI组件，如侧滑菜单、下拉刷新、选项卡、模态框、弹出提示、浮动按钮等，这些都是构建移动应用界面的基础。 2. **AngularJS集成**：Ionic 使用AngularJS...
在这个例子中，我们仅仅把应用的标题放在里面，然后再用ng-view指令来告诉Angular把视图显示在哪儿。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="StuApp"> <h
当使用`ng-options`指令创建下拉框时，Angular会自动转义HTML内容，以文本形式显示。例如，以下代码将不会正确渲染HTML： ```html ``` 在上述例子中，如果`t.text`包含HTML标签，它们会被显示为纯文本，而不是...
在这个“Node.js使用Angular简单示例”中，我们将探讨如何在Node.js环境下集成AngularJS框架，以便构建一个具有动态功能的Web后台管理系统。首先，我们需要理解Node.js是服务器端JavaScript运行环境，它允许我们在...
总结来说，这个AngularJS示例展示了如何使用`ng-model`、`ng-options`和`ng-change`指令来实现联动下拉菜单。通过数据绑定，我们能够轻松地更新视图，而无需手动操作DOM。这使得代码更加简洁，易于维护。同时，这个...