jqx tree manual UL and ng-repeat

Creating <ul> list with ng-repeat

by bob m

HTML

<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/angular.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtree.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxangular.js"></script>
<div ng-app="App" ng-controller="myController">
    <jqx-tree jqx-data="kriData" jqx-height="300">
        <ul>
            <li ng-repeat="kriGroup in data">{{kriGroup.group}}</li>
        </ul>
     </jqx-tree>
    <jqx-tree jqx-width="'300px'" jqx-height="'300px'">
                <ul>
                    <li id='home'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                            <li>Financial services</li>
                            <li>Government</li>
                            <li>Manufacturing</li>
                            <li>Solutions
                                <ul>
                                    <li>Consumer photo and video</li>
                                    <li>Mobile</li>
                                    <li>Rich Internet applications</li>
                                    <li>Technical communication</li>
                                    <li>Training and eLearning</li>
                                    <li>Web conferencing</li>
                                </ul>
                           ...

JavaScript

angular.module('App', ['jqwidgets'])
.controller('myController', function ($scope) {
    $scope.kriData = [
            {
            "group": "99_HSVaR",
            "kris": [
                {
                "kri": "1D"
                },
                {
                "kri": "1D CR"
                },
                {
                "kri": "1D EQ"
                },
                {
                "kri": "1D EUR/USD"
                }
            ]
            },
            {
            "group": "Additive",
            "kris": [
                {
                "kri": "MCS"
                }
            ]
            },
            {
            "group": "AsianCrisis",
            "kris": [
                {
                "kri": "Stressed"
                }
            ]
            }                   
        ];       
})