angularJS树形菜单

入门菜鸟程序猿 2017-03-03 11:49:00
本人新入IT行业 现需要学习angularjs 想明白 angularjs树形菜单是怎么写的 求大神告知!!!!
...全文
4225 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
以专业开发人员为伍 2017-04-30
  • 打赏
  • 举报
 回复
当你使用 angularjs或者别的框架（例如微软的 knockout，或者国产 Vue 框架）的时候，你可以在这个例子的 html 上直接使用 html模板（或者组件）的方式来动态绑定千变万化的数据，而其 js 部分其实也可以相应的框架的事件定义方式来声明到 html 模板上，而不需要像这个例子的 js 代码那样去单独写好几行 js 代码。 事实上，使用前端框架，要比这个例子更高效、更强壮，更简洁，扩展性更高。当然刚学 angularjs 可能费点力气，但是一旦会了，那么你会明白这里的代码在 angularjs 中不过就是3、4行数据绑定代码的事情。使用前端框架，开发web应用非常简单方便。
以专业开发人员为伍 2017-04-30
  • 打赏
  • 举报
 回复
从这个例子其实可以看出前端技术的大致比例： css 负责画线，它处理静态的“类型”修饰部分，非常好用。 html 负责数据架构。实际上前端框架还是使用“htm 模板+ ViewModel”结合来处理这些。不过这个例子很死板、比较初级、并没有强调数据千变万化后的通用性，所以它直接写成了html来代表了<ul><li>这样的数据。但是这起码也说明了，在 html 中重点是描述数据结构，而把样子（样式）分离到css中。 最后是js代码部分负责处理点击事件、加载事件等事件驱动的动态代码。代码当然是写的越少越好，这个例子就比较清晰，因为它明显是用来补充 css 所不容易表达的动画切换样式。注意这里是以设计为主，而不是代码为主。有些非常差的团队总是强调编程者来指挥设计，这是一种错误的思路。前端编程是用来填补设计设计的不足，编程应该“跟随”设计，而不是“指挥”设计。 从这个例子，非常清晰地看出了前端开发的职能分工。注意并不会要招聘多少种不同的人，而是一个人做一个事情要对事情的各个方面的技术有个分别，摆正每一个方面的比例和依赖关系。
以专业开发人员为伍 2017-04-29
  • 打赏
  • 举报
 回复
这是一个从网上抄来的代码，你可以看一下
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .tree {
            min-height: 20px;
            padding: 19px;
            margin-bottom: 20px;
            background-color: #fbfbfb;
            border: 1px solid #999;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        }

            .tree li {
                list-style-type: none;
                margin: 0;
                padding: 10px 5px 0 5px;
                position: relative;
            }

                .tree li::before, .tree li::after {
                    content: '';
                    left: -20px;
                    position: absolute;
                    right: auto;
                }

                .tree li::before {
                    border-left: 1px solid #999;
                    bottom: 50px;
                    height: 100%;
                    top: 0;
                    width: 1px;
                }

                .tree li::after {
                    border-top: 1px solid #999;
                    height: 20px;
                    top: 25px;
                    width: 25px;
                }

                .tree li span {
                    -moz-border-radius: 5px;
                    -webkit-border-radius: 5px;
                    border: 1px solid #999;
                    border-radius: 5px;
                    display: inline-block;
                    padding: 3px 8px;
                    text-decoration: none;
                }

                .tree li.parent_li > span {
                    cursor: pointer;
                }

            .tree > ul > li::before, .tree > ul > li::after {
                border: 0;
            }

            .tree li:last-child::before {
                height: 30px;
            }

            .tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul li span {
                background: #eee;
                border: 1px solid #94a0b4;
                color: #000;
            }
    </style>
</head>
<body>
    <div class="tree well">
        <ul>
            <li>
                <span><i class="glyphicon glyphicon-folder-open"></i>Parent</span> <a href="">Goes somewhere</a>
                <ul>
                    <li>
                        <span><i class="glyphicon glyphicon-minus-sign"></i>Child</span> <a href="">Goes somewhere</a>
                        <ul>
                            <li>
                                <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span> <a href="">Goes somewhere</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span><i class="glyphicon glyphicon-minus-sign"></i>Child</span> <a href="">Goes somewhere</a>
                        <ul>
                            <li>
                                <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span> <a href="">Goes somewhere</a>
                            </li>
                            <li>
                                <span><i class="glyphicon glyphicon-minus-sign"></i>Grand Child</span> <a href="">Goes somewhere</a>
                                <ul>
                                    <li>
                                        <span><i class="glyphicon glyphicon-minus-sign"></i>Great Grand Child</span> <a href="">Goes somewhere</a>
                                        <ul>
                                            <li>
                                                <span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span> <a href="">Goes somewhere</a>
                                            </li>
                                            <li>
                                                <span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span> <a href="">Goes somewhere</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span> <a href="">Goes somewhere</a>
                                    </li>
                                    <li>
                                        <span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span> <a href="">Goes somewhere</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span> <a href="">Goes somewhere</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <span><i class="glyphicon glyphicon-folder-open"></i>Parent2</span> <a href="">Goes somewhere</a>
                <ul>
                    <li>
                        <span><i class="glyphicon glyphicon-leaf"></i>Child</span> <a href="">Goes somewhere</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <br />
    <input type="button" value="打印" onclick="window.print()" />

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


    <script type="text/javascript">
        $(function () {
            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
            $('.tree li.parent_li > span').on('click', function (e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('glyphicon-plus-sign').removeClass('glyphicon-minus-sign');
                } else {
                    children.show('fast');
                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('glyphicon-minus-sign').removeClass('glyphicon-plus-sign');
                }
                e.stopPropagation();
            });
        });
    </script>
</body>
</html>
入门菜鸟程序猿 2017-03-03
  • 打赏
  • 举报
 回复
引用 1 楼 EnForGrass的回复:
有现成的啊，自己搜，不止如下 angular-ui-tree，ng-tree, ng-jstree
我的ledaer不允许使用现成的树型控件 需要自己写一个树型菜单。。。。。
EnForGrass 2017-03-03
  • 打赏
  • 举报
 回复
有现成的啊，自己搜，不止如下 angular-ui-tree，ng-tree, ng-jstree
EnForGrass 2017-03-03
  • 打赏
  • 举报
 回复
那你去研究下其中一个，再自己写
AngularJS实现树形结构(ztree)菜单示例代码
树形结构 树形结构有多种形式和实现方式，zTree可以说得上是一种比较简洁又美观的且实现起来也相对简单。zTree是一个依靠jQuery实现的多功能“树插件”。它最大的优点是配置灵活，只要id与pid的值相同就可形成一个简单的父子结构。再加上免费开源，使用zTree的人越来越多。 效果图如下 首先你需要知道AngularJS的双向数据绑定是什么才可以更好的理解下面的代码，想了很久才想出用下面的代码来实现左侧菜单树形结构 要实现上面的功能你需要操作如下步骤： 在HTML标签内添加ng-app，让AngularJS掌管整个HTML文档 <html lang="en" ng-app="myApp
angularjs下拉树控件
实现树的下拉效果，和ExtJs的treecombox大同小异。
AngularJS
AngularJS  通过新的属性和表达式扩展了 HTML。AngularJS  可以构建一个单一页面应用程序（SPAs：Single Page Applications）。AngularJS  学习起来非常简单。
基于angularjs的嵌套指令实现无限级下拉树菜单
该文件包含css样式和package.json文件，配合博客《基于angularjs的嵌套指令实现无限级下拉树菜单》使用。
angular-ui-tree-filter:提供 AngularJS 过滤器的模块，可与 angular-ui-tree 一起使用以匹配树节点
#ui.tree-过滤器 提供过滤器的模块，可与以匹配树节点。 使用生成的目录 这个怎么运作？ 它是可配置的： 您可以提供应该与提供的模式匹配的节点的默认属性： angular.module('myApp') .config(function (uiTreeFilterSettingsProvider) { uiTreeFilterSettingsProvider.addresses = ['title', 'description', 'username']; }); 或者您可以将属性列表作为可选的第三个参数传递： $filter('uiTreeFilter')(nodeObject, pattern, ['title', 'description', 'username']) 它匹配整个路径如果一个子节点也匹配它的所有祖先直到树根匹配： Filte
.NET技术其他语言

1,978

社区成员

12,450

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术 其他语言讨论
社区管理员
  • 其他语言社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章