jqwidgets在jsfiddle中不能工作的角度树构件

我正在使用9月份刚刚发布的新jqwidgets-angular版本。jqwidgets在jsfiddle中不能工作的角度树构件

gridtree工作得很好，但遇到树小部件的麻烦。

FYI：这是基于角树演示在这里：http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/index.htm#demos/jqxangular/tree.htm

这里是我工作中的jsfiddle，但不能让树在这里呈现：tree widget

所以两件事：

1）有人可以帮助我得到这个jsfiddle工作？ 2）有人可以帮助我让jqx-tree渲染使用ng-repeat

下面是来自该jsfiddle的代码。

只是一个直的重复内部的div（没有树部件）。这只是用于测试目的：

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

而这里的JQX树指令，这是不是在的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" 
      } 
     ] 
     }     
    ];  
    })

来源

2014-10-01 bob.mazzo

我找到了解决办法，贴在这个jsfiddle：http://jsfiddle.net/robertmazzo/s9snLu9m/3/

我的ng-r epeat在错误的范围内。此外，还有一些缺失的关键属性，如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>

来源

2014-10-01 20:15:13

jqwidgets在jsfiddle中不能工作的角度树构件

回答

相关问题