0

我正在使用新的 jqwidgets-angular 版本，该版本刚刚于 9 月发布。

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

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

这是我正在处理的 jsfiddle，但无法在此处渲染树：树小部件

所以有两件事：

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

这是该jsfiddle的代码。

只是一个 div 内的直接 ng-repeat（没有树小部件）。这仅用于测试目的：

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

1 回答 1

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>
于 2014-10-01T20:15:13.943 回答