Виджет углового дерева jqwidgets не работает в jsfiddle

Я работаю с новой версией jqwidgets-angular, выпущенной только в прошлом месяце, в сентябре.

Gridtree отлично работает, но возникли проблемы с виджетом дерева.

К вашему сведению: это основано на демонстрации дерева angular здесь: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/index.htm#demos/jqxangular/tree.htm

Вот jsfiddle, над которым я работаю, но не могу заставить дерево отображать здесь: виджет дерева

Итак, две вещи:

1) Может ли кто-нибудь помочь мне заставить этот jsfiddle работать? 2) Может ли кто-нибудь помочь мне получить jqx-дерево для рендеринга с помощью ng-repeat

Вот код из этого jsfiddle.

Просто прямой ng-repeat внутри div (без виджета дерева). Это только для целей тестирования:

<div ng-app="App" ng-controller="myController">
  <div>
     <ul>
        <li ng-repeat="kriGroup in kriData">{{kriGroup.group}}</li>
     </ul>
  </div>
</div>

А вот директива jqx-tree, которая НЕ работает в примере с jsfiddle:

 <div ng-controller="myController">
    <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>
                        </li>
                        <li>All industries and solutions</li>
                    </ul>
                </li>
                <li>Products
                    <ul>
                        <li>PC products</li>
                        <li>Mobile products</li>
                        <li>All products</li>
                    </ul>
                </li>
                <li>Support
                    <ul>
                        <li>Support home</li>
                        <li>Customer Service</li>
                        <li>Knowledge base</li>
                        <li>Books</li>
                        <li>Training and certification</li>
                        <li>Support programs</li>
                        <li>Forums</li>
                        <li>Documentation</li>
                        <li>Updates</li>
                    </ul>
                </li>
                <li>Communities
                    <ul>
                        <li>Designers</li>
                        <li>Developers</li>
                        <li>Educators and students</li>
                        <li>Partners</li>
                        <li>By resource
                            <ul>
                                <li>Labs</li>
                                <li>TV</li>
                                <li>Forums</li>
                                <li>Exchange</li>
                                <li>Blogs</li>
                                <li>Experience Design</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Company
                    <ul>
                        <li>About Us</li>
                        <li>Press</li>
                        <li>Investor Relations</li>
                        <li>Corporate Affairs</li>
                        <li>Careers</li>
                        <li>Showcase</li>
                        <li>Events</li>
                        <li>Contact Us</li>
                        <li>Become an affiliate</li>
                    </ul>
                </li>
            </ul>   
    </jqx-tree>
</div>

и, наконец, код контроллера js:

  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"
            }
        ]
        }                   
    ];       
  })

angularjs-ng-repeat jqwidget
person bob.mazzo    schedule 01.10.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение, опубликованное в этом jsfiddle: http://jsfiddle.net/robertmazzo/s9snLu9m/3/

Мой ng-repeat был в неправильной области. Кроме того, отсутствовали некоторые ключевые атрибуты, такие как директива jqx-data.

Например, как показано в jsfiddle:

<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>
</div>
person Community    schedule 01.10.2014