个人中心
gpt4 book ai didi

javascript - 为什么在使用嵌套列表时不加载 css ..？

转载 作者：行者123 更新时间：2023-11-30 06:53:26 24 4
gpt4 key购买 nike

我从这个链接学习后做了一个简单的 https://github.com/JimLiu/angular-ui-tree演示在这里 http://jimliu.github.io/angular-ui-tree/但为什么不显示“+”、“V”和“X”图标？

http://plnkr.co/edit/xur9RjMrhxEppNIewfo6?p=preview 

<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />

    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
     <script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
  </head>

  <body>
  <div ng-controller="MainCtrl">
<div ui-tree >
  <ol ui-tree-nodes="" ng-model="list">
    <li ng-repeat="item in list" ui-tree-node>
      <div ui-tree-handle>
        {{item.title}}
      </div>
      <ol ui-tree-nodes="" ng-model="item.items">
        <li ng-repeat="subItem in item.items" ui-tree-node>
          <div ui-tree-handle>
            {{subItem.title}}
          </div>
        </li>
      </ol>
    </li>
  </ol>
</div>
</div>
</body>
<script>
  var myAppModule = angular.module('MyApp', ['ui.tree']);
 myAppModule.controller('MainCtrl', function($scope) {
     $scope.list = [{
      "id": 1,
      "title": "1. dragon-breath",
      "items": []
    }, {
      "id": 2,
      "title": "2. moiré-vision",
      "items": [{
        "id": 21,
        "title": "2.1. tofu-animation",
        "items": [{
          "id": 211,
          "title": "2.1.1. spooky-giraffe",
          "items": []
        }, {
          "id": 212,
          "title": "2.1.2. bubble-burst",
          "items": []
        }],
      }, {
        "id": 22,
        "title": "2.2. barehand-atomsplitting",
        "items": []
      }],
    }, {
      "id": 3,
      "title": "3. unicorn-zapper",
      "items": []
    }, {
      "id": 4,
      "title": "4. romantic-transclusion",
      "items": []
    }];
 })
</script>

</html>

我哪里错了..？你能告诉我吗？

最佳答案

我刚刚从 gearsdigital 中清理了一些东西回答。这是更新的 plunkr我改变的是

  1. 更新了 angular-ui-tree 的源代码(提供的 plunkr 使用了 dropbox 源代码)
  2. 创建了一个新的 item-renderer.html。这为清理和简化代码的每个项目创建了一个列表渲染器。这有助于无限嵌套。

item_renderer.html

 <div ui-tree-handle class="tree-node tree-node-content">
    <a class="btn btn-success btn-xs"  data-nodrag ng-click="toggle(this)"><span
        class="glyphicon"
        ng-class="{
          'glyphicon-chevron-right': collapsed,
          'glyphicon-chevron-down': !collapsed
        }"></span></a>
    {{item.title}}
    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
    <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span
        class="glyphicon glyphicon-plus"></span></a>
  </div>
  <ol ui-tree-nodes="" ng-model="item.items" ng-class="{hidden: collapsed}">
    <li ng-repeat="item in item.items" ui-tree-node ng-include="'item_renderer.html'">
    </li>
  </ol>

index.html

    <!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link data-require="angular-ui-tree@*" data-semver="2.8.0" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.css" />
    <script data-require="angular-ui-tree@*" data-semver="2.8.0" src="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="MainCtrl">
        <!-- Nested node template -->
        <div class="row">
            <div class="col-sm-6">
                <div ui-tree id="tree-root">
                    <ol ui-tree-nodes ng-model="list">
                        <li ng-repeat="item in list" ui-tree-node ng-include="'item_renderer.html'"></li>
                    </ol>
                </div>
            </div>
      </div>
    </div>

  </body>

</html>

脚本.js

var myAppModule = angular.module('MyApp', ['ui.tree']);
 myAppModule.controller('MainCtrl', function($scope) {

   $scope.remove = function (scope) {
            scope.remove();
        };

        $scope.toggle = function (scope) {
            scope.toggle();
        };

        $scope.moveLastToTheBeginning = function () {
            var a = $scope.list.pop();
            $scope.list.splice(0, 0, a);
        };

        $scope.newSubItem = function (scope) {
            var nodeData = scope.$modelValue;
            console.log(nodeData);
            nodeData.items.push({
                id: nodeData.id * 10 + nodeData.items.length,
                title: nodeData.title + '.' + (nodeData.length + 1),
                items: []
            });
        };
     $scope.list = [{
      "id": 1,
      "title": "1. dragon-breath",
      "items": []
    }, {
      "id": 2,
      "title": "2. moiré-vision",
      "items": [{
        "id": 21,
        "title": "2.1. tofu-animation",
        "items": [{
          "id": 211,
          "title": "2.1.1. spooky-giraffe",
          "items": []
        }, {
          "id": 212,
          "title": "2.1.2. bubble-burst",
          "items": []
        }],
      }, {
        "id": 22,
        "title": "2.2. barehand-atomsplitting",
        "items": []
      }],
    }, {
      "id": 3,
      "title": "3. unicorn-zapper",
      "items": []
    }, {
      "id": 4,
      "title": "4. romantic-transclusion",
      "items": []
    }];
 })

关于javascript - 为什么在使用嵌套列表时不加载 css ..？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25349527/

24 4 0
文章推荐： java - 我是否必须关闭 JdbcTemplate 连接和手动创建的语句？
文章推荐： java - MongoDb 与 SpringData - 在后台创建所有索引的全局设置
文章推荐： java - 如何减少InputStreams和OutputStreams之间的写入？
文章推荐： javascript - jQuery 将元素添加到先前定义的事件处理程序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com