TreeModel 검색 예제　

by Jaeha Ahn

HTML

<div ng-app="myApp">
    <div ng-controller="myController">
        <h3>변환된 트리 모델</h3>
        <div class="treeModel">
            <pre>
{{tree}}
            </pre>
        </div>
        <hr/>
        <div><h3>검색할 노드 ID</h3> <input type="text" data-ng-model="id"><input type="button" value="검색" data-ng-click="search()"></div>
        <hr/>
        <h3>검색된 트리 모델</h3>
        <div class="treeModel" data-ng-show="result">

            <pre>
{{result}}
            </pre>
        </div>
        <div data-ng-hide="result">
            검색된 결과가 없습니다.
        </div>
    </div>
</div>

CSS

div[ng-controller] {
    font-size: 12px;
}

div.treeModel {
    padding:10px;
    background-color:#EEE; 
    border-radius:5px; 
    line-height: 120%;
    color: #555;
    font-size: 12px;
    height: 150px;
    overflow-x: auto;
    overflow-y: scroll;
}

hr {
    border: none;
    height: 20px;
}

JavaScript

(function(){
    
    var myApp = angular.module('myApp', []);
    
    myApp.controller('myController', function($scope){
        
        //트리로 변환할 배열
        var list = 
        [
            {"parentId":"root","label":"환경 사업 추적","id":"KBO00002","order":2},
            {"parentId":"root","label":"데이터 사업 추적","id":"KBO00003","order":3},
            {"parentId":"root","label":"환경 제공 추적","id":"KBO00004","order":4},
            {"parentId":"root","label":"데이터 제공 추적","id":"KBO00005","order":5},
            {"parentId":"root","label":"고객센터 추적","id":"KBO00006","order":6},
            {"parentId":"root","label":"마이페이지","id":"KBO00018","order":20},
            {"parentId":"root","label":"포털 추적","id":"KBO00001","order":22},
            {"parentId":"root","label":"파일 관리","id":"KBO00288","order":23},
            {"parentId":"KBO00001","label":"사용자 추적 ","id":"KBO00020","order":1},
            {"parentId":"KBO00001","label":"코드 추적 ","id":"KBO00021","order":2},
            {"parentId":"KBO00001","label":"분류체계 추적 ","id":"KBO00050","order":3},
            {"parentId":"KBO00001","label":"보안기능강화","id":"KBO00191","order":4},
            {"parentId":"KBO00001","label":"통계 추적 ","id":"KBO00023","order":5},
            {"parentId":"KBO00002","label":"환경 심의 추적","id":"KBO00155","order":1},
            {"parentId":"KBO00002","label":"환경 제공 추적 ","id":"KBO00156","order":2},
            {"parentId":"KBO00002","label":"환경 운영 추적","id":"KBO00157","order":3},
            {"parentId":"KBO00002","label":"파일서비스 지정 추적 ","id":"KBO00051","order":4},
            {"parentId":"KBO00002","label":"통계 추적","id":"KBO00052","order":6},
            {"parentId":"KBO00003","label":"데이터 추적","id":"KBO00171","order":1},
            {"parentId":"KBO00003","label":"정산 추적 ","id":"KBO00172","order":2},
            {"parentId":"KBO00003","label":"파일서비스 지정 추적 ","id":"KBO00078","order":3},
            {"parentId":"KBO00003","label":"대용량데이터등록 ","id":"KBO00079","order":4},
            {"parentId":"KBO00003","label":"통계 추적...