Question

我正在使用上个月9月发布的新jqwidgets-angular版本。

gridtree工作得很好，但是树小部件有问题。

仅供参考：这是基于角度树演示：http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/index.htm#demos/jqxangular/tree.htm

这是我正在处理的jsfiddle，但是无法在这里呈现树：tree widget

所以有两件事：

1）有人可以帮助我让这个jsfiddle工作吗？ 2）有人可以帮助我使用ng-repeat

来渲染jqx树

这是来自jsfiddle的代码。

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

Answer 1

我找到了解决方案，发布在这个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>

jqwidgets角树小部件在jsfiddle中不起作用

1 个答案: