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中不能工作的角度樹構件

回答

相關問題