কৌণিক দিয়ে গাছের দৃশ্য তৈরি করা কি সম্ভব?

Question

আমি একটি ওয়েব অ্যাপ্লিকেশনটিতে গাছের কাঠামোর ডেটা প্রদর্শন করতে চাই। আমি এই কাজের জন্য কৌণিক ব্যবহার করার আশা করছিলাম।

এনজি-রিপিট দেখে মনে হচ্ছে নোডের তালিকার মাধ্যমে আমাকে পুনরাবৃত্তি করতে অনুমতি দেবে, কিন্তু প্রদত্ত নোডের গভীরতা বৃদ্ধি পেলে আমি কীভাবে বাসা বাঁধতে পারি?

আমি নিম্নলিখিত কোডটি চেষ্টা করেছিলাম , তবে এইচটিএমএল-এর স্বয়ংক্রিয়ভাবে পালানো এটিকে কাজ করা থেকে বিরত করছে। এছাড়াও, শেষ উল ট্যাগটি ভুল জায়গায়।

আমি পুরোপুরি নিশ্চিত যে আমি এই সমস্যাটি পুরোপুরি ভুল পথে নিয়ে যাচ্ছি।

কোন ধারনা?

Comments

: আমি শুধুমাত্র একটি ভিন্ন প্রশ্নে উপর একটি প্রশংসনীয় জেনেরিক ভাবে এই উত্তরে stackoverflow.com/questions/14430655/...

— tilgovi

Answer 1

এই ঝাঁকুনি দেখুন

আসল: http://jsfiddle.net/brendanowen/uXbn6/8/

আপডেট হয়েছে: http://jsfiddle.net/animaxf/uXbn6/4779/

এটি আপনাকে tree like structureকৌণিক ব্যবহার করে কীভাবে প্রদর্শন করতে হবে তার একটি ভাল ধারণা দেওয়া উচিত । এটি এইচটিএমএলে পুনরাবৃত্তি ব্যবহার করার মতো!

Comments

কেন আপনার উত্স না ? আপনি সেই থ্রেডে একটি পোস্ট লিখেছেন, এবং এখন আপনি এখানে নিজের নামের সাথে একটি url পোস্ট করছেন?

— জানুস ট্রয়লসেন

এখানে একটি অভিন্ন সংস্করণ রয়েছে (আমার মনে হয়) এটি খুব দ্রুত লোড হয় (আমার পক্ষে কমপক্ষে), যেহেতু এটিতে সিএসএস বিভাগে টুইটার বুটস্ট্র্যাপের অন্তর্ভুক্ত নেই। jsfiddle.net/brendanowen/uXbn6/8

— KajMagnus

বন্ধু তুমি তোমার উত্স বর্ণনা কর

— আজাক্স 3.14

আমি লোকেরা এই সম্পর্কে ক্রমাগত মন্তব্য করতে করতে ক্লান্ত হয়ে পড়েছিলাম যে এতে ইউআরএলটির আমার নাম রয়েছে (এবং তাই এটি চুরির ঘটনা!)। দুর্ভাগ্যক্রমে jsfiddle কিভাবে কাজ করে। আপনি লগ ইন করার সময় যদি কিছুটা কাঁটাচামচ করেন তবে এটি আপনার ব্যবহারকারীর নাম ধরে রাখে। আমি এখন মূল ইউআরএল লিঙ্ক করেছি বলে। কোনও উত্তর যদি এটি ভুল হয় তবে তা ডাউনওয়েট করুন - এই দৃশ্যে উত্তরটি সঠিক হতে পারে এমন এক জিনিসটির সাথে আমার যে ব্যাকআপ ইউআরএলটি ছিল তাতে আমার নাম রয়েছে বলে মনে হয়।

— গণরাজ

আমি সবেমাত্র আপনার সংস্করণে ধসের এবং প্রসারিত বোতামটি যুক্ত করেছি: jsfiddle.net/uXbn6/639

— jbaylina

Answer 2

আপনি যদি বুটস্ট্র্যাপ সিএসএস ব্যবহার করেন ...

আমি বুটস্ট্র্যাপ "ন্যাভ" তালিকার উপর ভিত্তি করে অ্যাংুলারজেএস-এর জন্য একটি সাধারণ পুনরায় ব্যবহারযোগ্য গাছ নিয়ন্ত্রণ (নির্দেশিকা) তৈরি করেছি। আমি অতিরিক্ত ইনডেন্টেশন, আইকন এবং অ্যানিমেশন যুক্ত করেছি। এইচটিএমএল বৈশিষ্ট্যগুলি কনফিগারেশনের জন্য ব্যবহৃত হয়।

এটি পুনরাবৃত্তি ব্যবহার করে না।

আমি এটিকে কৌণিক-বুটস্ট্র্যাপ-ন্যাভ-ট্রি বলেছি (আকর্ষণীয় নাম, আপনি কি ভাবেন না?)

এখানে একটি উদাহরণ রয়েছে , এবং উত্সটি এখানে রয়েছে ।

Comments

এটি সুন্দর, তবে সতর্ক হতে হবে এটি কৌণিক 1.0.x শাখায় কাজ করে না।

— ডানিতা

হ্যাঁ, এটি নতুন অ্যানিমেশন স্টাফ ব্যবহার করে ... কৌনিক 1.1.5 প্রয়োজন (আমি মনে করি?)

— নিক পার্কিনস

আপডেট: এটি এখন কৌণিক 1.1.5 বা কৌণিক 1.2.2.0 এর সাথে কাজ করে এবং বুটস্রাপ 2 বা বুটস্ট্র্যাপ 3

— নিক পার্কিনস

শুধুমাত্র এফওয়াইআই, যদি বোভার ব্যবহার করে থাকেন, নিক এখন সহজ ইনস্টল - "বোভার অনুসন্ধান কৌণিক-বুটস্ট্র্যাপ-ন্যাভ-ট্রি", এবং "বওয়ার ইনস্টল কৌণিক-বুটস্ট্র্যাপ-এনভি-ট্রি - সেভ" এর জন্য উপলব্ধ করেছে এবং আপনার কাজ শেষ হয়েছে।

— আর্সেল্ডন

@ নিক পার্কিনস - দয়া করে আপনি ব্যাখ্যা করতে পারেন কেন আপনার কৌণিক-বুটস্ট্র্যাপ-নাভ-ট্রি একটি শাখা / নোড অপসারণের জন্য কোনও এপিআই নেই। কমপক্ষে, উত্সটির তাত্ক্ষণিক পরিদর্শন থেকে এবং সেখানে আপনার পরীক্ষা / উদাহরণগুলি পরীক্ষা করা সেই বিকল্প বলে মনে হয় না। এটি একটি সমালোচনামূলক ভুল, অবশ্যই?

— আর্সেল্ডন

Answer 3

এই জাতীয় কিছু তৈরি করার সময় সেরা সমাধানটি পুনরাবৃত্তির দিকনির্দেশনা। যাইহোক, আপনি যখন এ জাতীয় নির্দেশনা দেন তখন আপনি জানতে পারেন যে AngularJS একটি অন্তহীন লুপে যায়।

এর সমাধানটি হ'ল নির্দেশটি সংকলনের ইভেন্টের সময় উপাদানটি সরিয়ে ফেলা যাক এবং ম্যানুয়ালি সংকলন করুন এবং লিঙ্ক ইভেন্টগুলিতে সেগুলি যুক্ত করুন।

আমি এই থ্রেডে এটি সম্পর্কে জানতে পেরেছি এবং এই কার্যকারিতাটি পরিষেবাতে বিমূর্ত করেছি ।

module.factory('RecursionHelper', ['$compile', function($compile){
    return {
        /**
         * Manually compiles the element, fixing the recursion loop.
         * @param element
         * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
         * @returns An object containing the linking functions.
         */
        compile: function(element, link){
            // Normalize the link parameter
            if(angular.isFunction(link)){
                link = { post: link };
            }

            // Break the recursion loop by removing the contents
            var contents = element.contents().remove();
            var compiledContents;
            return {
                pre: (link && link.pre) ? link.pre : null,
                /**
                 * Compiles and re-adds the contents
                 */
                post: function(scope, element){
                    // Compile the contents
                    if(!compiledContents){
                        compiledContents = $compile(contents);
                    }
                    // Re-add the compiled contents to the element
                    compiledContents(scope, function(clone){
                        element.append(clone);
                    });

                    // Call the post-linking function, if any
                    if(link && link.post){
                        link.post.apply(null, arguments);
                    }
                }
            };
        }
    };
}]);

এই পরিষেবাটির সাহায্যে আপনি সহজেই গাছের নির্দেশনা তৈরি করতে পারেন (বা অন্যান্য পুনরাবৃত্ত নির্দেশ)। এখানে গাছের নির্দেশনার উদাহরণ রয়েছে:

module.directive("tree", function(RecursionHelper) {
    return {
        restrict: "E",
        scope: {family: '='},
        template: 
            '<p>{{ family.name }}</p>'+
            '<ul>' + 
                '<li ng-repeat="child in family.children">' + 
                    '<tree family="child"></tree>' +
                '</li>' +
            '</ul>',
        compile: function(element) {
            return RecursionHelper.compile(element);
        }
    };
});

একটি ডেমো জন্য এই Plunker দেখুন । আমি এই সমাধানটি সবচেয়ে পছন্দ করি কারণ:

1. আপনার কোনও বিশেষ নির্দেশের দরকার নেই যা আপনার এইচটিএমএলকে আরও পরিষ্কার করে তোলে।
2. পুনরাবৃত্তি যুক্তিটি পুনরাবৃত্তিহেল্পার পরিষেবাতে বিমূর্ত করা হয়, সুতরাং আপনি আপনার নির্দেশকে পরিষ্কার রাখুন।

আপডেট: একটি কাস্টম সংযোগ ফাংশন জন্য সমর্থন যুক্ত।

Comments

এটি এত ঝরঝরে এবং শক্তিশালী বলে মনে হচ্ছে, কেন এমন কোনও ধারণা কেন এটি কৌণিকর মধ্যে একটি ডিফল্ট আচরণ নয়?

— পল

এই জাতীয় "সংকলন" ব্যবহার করার সময়, কীভাবে একজন সুযোগে অতিরিক্ত গুণাবলী যুক্ত করে? "সংকলন" উপস্থিত থাকলে "লিঙ্ক" ফাংশনটি আর উপলব্ধ হয় না ...

— ব্রায়ান কেন্ট

@ bkent314 আমি এটির জন্য সমর্থন যুক্ত করেছি। এটি এখন সংযোগ ফাংশনগুলি একইভাবে গ্রহণ করে যেমন সংকলনগুলি তাদের ফিরিয়ে দিতে পারে। আমি পরিষেবাটির জন্য একটি গিথুব প্রকল্পও তৈরি করেছি।

— মার্ক Lagendijk

নিবন্ধন করুন নির্দেশের বাইরে পুনরাবৃত্তি বিমূর্ত করার জন্য আপনি অনেকগুলি উপার্জনের অধিকারী। আমি যে সমস্ত নির্দেশাবলী দেখেছি সেগুলি এই যুক্তিকে মিশ্রিত করে আশাহীনভাবে জটিল দেখায় your

— আক্জাই

আমি সত্যিই আপনাকে পরামর্শ দিচ্ছি যে আপনি এই জাতীয় সমাধানটিতে কিছু তথ্য নিক্ষেপ করেন - হ্যাঁ, প্রায় প্রত্যেকেই পুনরাবৃত্ত নির্দেশাবলী সহ বৃক্ষ প্রয়োগ করে, এটি সহজ। তবে এটি এনজি-রিপিট $ ডাইজেস্টের হিসাবে অত্যন্ত ধীর - একবার আপনি শত শত নোড পেয়ে গেলে, এটি সম্পাদন করে না।

— আর্টেমি

Answer 4

কৌণিক- ui- গাছ আমার জন্য একটি ভাল কাজ বলে মনে হচ্ছে

Answer 5

পুনরাবৃত্ত নির্দেশাবলী ব্যবহার করে এখানে একটি উদাহরণ দেওয়া হয়েছে: http://jsfiddle.net/n8dPm/ https://groups.google.com/forum/#!topic/angular/vswXTes_FtM থেকে নেওয়া

module.directive("tree", function($compile) {
return {
    restrict: "E",
    scope: {family: '='},
    template: 
        '<p>{{ family.name }}</p>'+
        '<ul>' + 
            '<li ng-repeat="child in family.children">' + 
                '<tree family="child"></tree>' +
            '</li>' +
        '</ul>',
    compile: function(tElement, tAttr) {
        var contents = tElement.contents().remove();
        var compiledContents;
        return function(scope, iElement, iAttr) {
            if(!compiledContents) {
                compiledContents = $compile(contents);
            }
            compiledContents(scope, function(clone, scope) {
                     iElement.append(clone); 
            });
        };
    }
};
});

Comments

আমি এটি নিয়ে পরীক্ষা-নিরীক্ষা করছিলাম এবং আমিও প্রতিলিপি ব্যবহার করতে চাই, আপনি কি মনে করেন এটি সম্ভব?

— এল ট্রাবাচিন

Answer 6

এটিকে কিছুটা সম্পূর্ণ বলে মনে হচ্ছে: https://github.com/dump247/angular.tree

Answer 7

ইতিমধ্যে স্থানে থাকা নমুনা গাছের কাঠামোর ( মূলত এটি আইএমও কীভাবে কাজ করে তা দেখতে সহজ) এবং গাছটি অনুসন্ধানের জন্য একটি ফিল্টার সহ মূল উত্সকে ভিত্তি করে অন্য একটি উদাহরণ :

JSFiddle

Answer 8

অনেক দুর্দান্ত সমাধান, তবে আমি সেগুলি একরকম বা অন্য কোনও বিষয়কে কিছুটা জটিল করে অনুভব করি।

আমি এমন কিছু তৈরি করতে চেয়েছিলাম যা @ মার্ক লেজেনডিজকের অ্যাঞ্জারারের সরলতাটি পুনরায় তৈরি করেছিল, তবে এটি নির্দেশে কোনও টেম্পলেটটিকে সংজ্ঞায়িত না করে বরং "ব্যবহারকারীকে" এইচটিএমএলে টেমপ্লেট তৈরি করতে দেয় ...

Https://github.com/stackfull/angular-tree-repeat ইত্যাদি থেকে নেওয়া আইডিয়া সহ ... আমি এই প্রকল্পটি তৈরি করে শেষ করেছি: https://github.com/dotJEM/angular-tree

যা আপনাকে আপনার গাছটি তৈরি করতে দেয়:

<ul dx-start-with="rootNode">
  <li ng-repeat="node in $dxPrior.nodes">
    {{ node.name }}
    <ul dx-connect="node"/>
  </li>
</ul>

আমার কাছে কোনটি ভিন্ন কাঠামোগত গাছগুলির জন্য একাধিক নির্দেশনা তৈরি করার চেয়ে পরিষ্কার .... আমাদের গাছের প্রয়োজন যেখানে টেমপ্লেটটি সংজ্ঞায়িত করুন।

(আপনি এটি স্ক্রিপ্ট ট্যাগ ভিত্তিক টেম্পলেট দিয়ে করতে পারেন, তবে এটি এখনও সত্য গাছের নোডের ঠিক বাইরে বসে থাকতে পারে এবং এটি এখনও কিছুটা ইউকে অনুভব করে ...)

এখানে অন্য একটি পছন্দ রেখে গেছে ...

Comments

আপডেট: 1.5 হিসাবে পুনরাবৃত্ত নির্দেশাবলী এখন কিছুটা স্থানীয়ভাবে অ্যাঙ্গুলারে সমর্থিত। এটি ডটজেম / কৌণিক-গাছের জন্য ব্যবহারের কেসকে এক বিশাল বিষয় হ্রাস করে।

— জেনস

Answer 9

আপনি কৌণিক-বৃক্ষ-ডিএনডি নমুনার সাথে কৌণিক-ইউআই-গাছের সাহায্যে চেষ্টা করতে পারেন , তবে আমি সম্পাদনা করেছি, টেবিল, গ্রিড, তালিকার সাথে সামঞ্জস্য।

• সক্ষম টানুন এবং ফেলে দিন
• তালিকার জন্য বর্ধিত ক্রিয়াকলাপের নির্দেশিকা (পরবর্তী, পূর্ববর্তী, getChildren, ...)
• ফিল্টার ডেটা।
• অর্ডার বাই (ভেরি)

Comments

ধন্যবাদ. আমার ড্র্যাগ অ্যান্ড ড্রপের দরকার ছিল এবং এটির সাথে এটিই একমাত্র সমাধান বলে মনে হচ্ছে!

— ডগ

Answer 10

@Ganaraj এর উত্তর , এবং @ dnc253 এর উত্তরের ভিত্তিতে আমি গাছের কাঠামোর জন্য বৈশিষ্ট্য নির্বাচন, যুক্ত, মোছা এবং সম্পাদনা করার জন্য একটি সাধারণ "নির্দেশিকা" তৈরি করেছি।

জাসফিডাল: http://jsfiddle.net/yoshiokatsuneo/9dzsms7y/

এইচটিএমএল:

<script type="text/ng-template" id="tree_item_renderer.html">
    <div class="node"  ng-class="{selected: data.selected}" ng-click="select(data)">
        <span ng-click="data.hide=!data.hide" style="display:inline-block; width:10px;">
            <span ng-show="data.hide && data.nodes.length > 0" class="fa fa-caret-right">+</span>
            <span ng-show="!data.hide && data.nodes.length > 0" class="fa fa-caret-down">-</span>
        </span>
        <span ng-show="!data.editting" ng-dblclick="edit($event)" >{{data.name}}</span>
        <span ng-show="data.editting"><input ng-model="data.name" ng-blur="unedit()" ng-focus="f()"></input></span>
        <button ng-click="add(data)">Add node</button>
        <button ng-click="delete(data)" ng-show="data.parent">Delete node</button>
    </div>
    <ul ng-show="!data.hide" style="list-style-type: none; padding-left: 15px">
        <li ng-repeat="data in data.nodes">
            <recursive><sub-tree data="data"></sub-tree></recursive>
        </li>
    </ul>
</script>
<ul ng-app="Application" style="list-style-type: none; padding-left: 0">
    <tree data='{name: "Node", nodes: [],show:true}'></tree>
</ul>

javascript:

angular.module("myApp",[]);

/* https://stackoverflow.com/a/14657310/1309218 */
angular.module("myApp").
directive("recursive", function($compile) {
    return {
        restrict: "EACM",
        require: '^tree',
        priority: 100000,

        compile: function(tElement, tAttr) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents);
                }
                compiledContents(scope, 
                                     function(clone) {
                         iElement.append(clone);
                                         });
            };
        }
    };
});

angular.module("myApp").
directive("subTree", function($timeout) {
    return {
        restrict: 'EA',
        require: '^tree',
        templateUrl: 'tree_item_renderer.html',
        scope: {
            data: '=',
        },
        link: function(scope, element, attrs, treeCtrl) {
            scope.select = function(){
                treeCtrl.select(scope.data);
            };
            scope.delete = function() {
                scope.data.parent.nodes.splice(scope.data.parent.nodes.indexOf(scope.data), 1);
            };
            scope.add = function() {
                var post = scope.data.nodes.length + 1;
                var newName = scope.data.name + '-' + post;
                scope.data.nodes.push({name: newName,nodes: [],show:true, parent: scope.data});
            };
            scope.edit = function(event){
                scope.data.editting = true;
                $timeout(function(){event.target.parentNode.querySelector('input').focus();});
            };
            scope.unedit = function(){
                scope.data.editting = false;
            };

        }
    };
});


angular.module("myApp").
directive("tree", function(){
    return {
        restrict: 'EA',
        template: '<sub-tree data="data" root="data"></sub-tree>',
        controller: function($scope){
            this.select = function(data){
                if($scope.selected){
                    $scope.selected.selected = false;
                }
                data.selected = true;
                $scope.selected = data;
            };
        },
        scope: {
            data: '=',
        }
    }
});

Answer 11

হ্যাঁ এটা অবশ্যই সম্ভব। এখানে প্রশ্নটি সম্ভবত কৌনিক 1.x ধরে নিয়েছে, তবে ভবিষ্যতের রেফারেন্সের জন্য আমি একটি কৌনিক 2 উদাহরণ অন্তর্ভুক্ত করছি:

ধারণামূলকভাবে আপনাকে যা করতে হবে তা হ'ল একটি পুনরাবৃত্ত টেম্পলেট তৈরি করা:

<ul>
    <li *for="#dir of directories">

        <span><input type="checkbox" [checked]="dir.checked" (click)="dir.check()"    /></span> 
        <span (click)="dir.toggle()">{{ dir.name }}</span>

        <div *if="dir.expanded">
            <ul *for="#file of dir.files">
                {{file}}
            </ul>
            <tree-view [directories]="dir.directories"></tree-view>
        </div>
    </li>
</ul>

তারপরে আপনি কোনও গাছের বস্তুকে টেমপ্লেটে বেঁধে দিন এবং কৌণিকটি তার যাদুতে কাজ করতে দিন। এই ধারণাটি স্পষ্টতই Angular 1.x এর ক্ষেত্রেও প্রযোজ্য।

এখানে একটি সম্পূর্ণ উদাহরণ: http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

Answer 12

আপনি তার জন্য কৌণিক-পুনরাবৃত্তি-ইনজেক্টর ব্যবহার করতে পারেন: https://github.com/knyga/angular-recursion-injector

আপনাকে কন্ডিশনার সহ সীমাহীন গভীরতা বাসাতে দেয়। শুধুমাত্র প্রয়োজন হলে পুনরায় সংশ্লেষণ করে এবং কেবল সঠিক উপাদানগুলি সংকলন করে। কোডে কোনও জাদু নেই।

<div class="node">
  <span>{{name}}</span>

  <node--recursion recursion-if="subNode" ng-model="subNode"></node--recursion>
</div>

এমন একটি জিনিস যা এটিকে দ্রুত এবং সহজভাবে কাজ করতে দেয় তার পরে অন্যান্য সমাধানগুলি হ'ল "--recursion" প্রত্যয়।

Answer 13

যখন গাছের কাঠামো বড় হয়, তখন কৌণিক (1.4.x অবধি) পুনরাবৃত্ত টেম্পলেটটি সরবরাহ করতে খুব ধীর হয়ে যায়। এই পরামর্শগুলির একটি সংখ্যা চেষ্টা করার পরে, আমি একটি সাধারণ এইচটিএমএল স্ট্রিং তৈরি করে ng-bind-htmlএবং এটি প্রদর্শনের জন্য ব্যবহার করে শেষ করেছি। অবশ্যই, এটি কৌনিক বৈশিষ্ট্যগুলি ব্যবহার করার উপায় নয়

একটি খালি-হাড়ের পুনরাবৃত্তি ফাংশন এখানে দেখানো হয়েছে (নূন্যতম এইচটিএমএল সহ):

function menu_tree(menu, prefix) {
    var html = '<div>' + prefix + menu.menu_name + ' - ' + menu.menu_desc + '</div>\n';
    if (!menu.items) return html;
    prefix += menu.menu_name + '/';
    for (var i=0; i<menu.items.length; ++i) {
        var item = menu.items[i];
        html += menu_tree(item, prefix);
    }
    return html;
}
// Generate the tree view and tell Angular to trust this HTML
$scope.html_menu = $sce.trustAsHtml(menu_tree(menu, ''));

টেমপ্লেটে, এটি কেবল এই এক লাইনের প্রয়োজন:

<div ng-bind-html="html_menu"></div>

এটি অ্যাংুলারের সমস্ত ডেটা বাইন্ডিংকে বাইপাস করে এবং পুনরাবৃত্তি টেম্পলেট পদ্ধতিগুলির সময়ের একটি ভগ্নাংশে কেবল HTML প্রদর্শন করে।

এর মতো মেনু কাঠামো সহ (লিনাক্স ফাইল সিস্টেমের একটি আংশিক ফাইল ট্রি):

menu = {menu_name: '', menu_desc: 'root', items: [
            {menu_name: 'bin', menu_desc: 'Essential command binaries', items: [
                {menu_name: 'arch', menu_desc: 'print machine architecture'},
                {menu_name: 'bash', menu_desc: 'GNU Bourne-Again SHell'},
                {menu_name: 'cat', menu_desc: 'concatenate and print files'},
                {menu_name: 'date', menu_desc: 'display or set date and time'},
                {menu_name: '...', menu_desc: 'other files'}
            ]},
            {menu_name: 'boot', menu_desc: 'Static files of the boot loader'},
            {menu_name: 'dev', menu_desc: 'Device files'},
            {menu_name: 'etc', menu_desc: 'Host-specific system configuration'},
            {menu_name: 'lib', menu_desc: 'Essential shared libraries and kernel modules'},
            {menu_name: 'media', menu_desc: 'Mount point for removable media'},
            {menu_name: 'mnt', menu_desc: 'Mount point for mounting a filesystem temporarily'},
            {menu_name: 'opt', menu_desc: 'Add-on application software packages'},
            {menu_name: 'sbin', menu_desc: 'Essential system binaries'},
            {menu_name: 'srv', menu_desc: 'Data for services provided by this system'},
            {menu_name: 'tmp', menu_desc: 'Temporary files'},
            {menu_name: 'usr', menu_desc: 'Secondary hierarchy', items: [
                {menu_name: 'bin', menu_desc: 'user utilities and applications'},
                {menu_name: 'include', menu_desc: ''},
                {menu_name: 'local', menu_desc: '', items: [
                    {menu_name: 'bin', menu_desc: 'local user binaries'},
                    {menu_name: 'games', menu_desc: 'local user games'}
                ]},
                {menu_name: 'sbin', menu_desc: ''},
                {menu_name: 'share', menu_desc: ''},
                {menu_name: '...', menu_desc: 'other files'}
            ]},
            {menu_name: 'var', menu_desc: 'Variable data'}
        ]
       }

আউটপুট হয়ে যায়:

- root
/bin - Essential command binaries
/bin/arch - print machine architecture
/bin/bash - GNU Bourne-Again SHell
/bin/cat - concatenate and print files
/bin/date - display or set date and time
/bin/... - other files
/boot - Static files of the boot loader
/dev - Device files
/etc - Host-specific system configuration
/lib - Essential shared libraries and kernel modules
/media - Mount point for removable media
/mnt - Mount point for mounting a filesystem temporarily
/opt - Add-on application software packages
/sbin - Essential system binaries
/srv - Data for services provided by this system
/tmp - Temporary files
/usr - Secondary hierarchy
/usr/bin - user utilities and applications
/usr/include -
/usr/local -
/usr/local/bin - local user binaries
/usr/local/games - local user games
/usr/sbin -
/usr/share -
/usr/... - other files
/var - Variable data

Answer 14

জটিল নয়।

<div ng-app="Application" ng-controller="TreeController">
    <table>
        <thead>
            <tr>
                <th>col 1</th>
                <th>col 2</th>
                <th>col 3</th>
            </tr>
        </thead>
        <tbody ng-repeat="item in tree">
            <tr>
                <td>{{item.id}}</td>
                <td>{{item.fname}}</td>
                <td>{{item.lname}}</td>
            </tr>
            <tr ng-repeat="children in item.child">
                <td style="padding-left:15px;">{{children.id}}</td>
                <td>{{children.fname}}</td>
            </tr>
        </tbody>
     </table>
</div>

নিয়ামক কোড:

angular.module("myApp", []).
controller("TreeController", ['$scope', function ($scope) {
    $scope.tree = [{
        id: 1,
        fname: "tree",
        child: [{
            id: 1,
            fname: "example"
        }],
        lname: "grid"
    }];


}]);