ng-repeat 和 jsTree

Question

嗨，我有一个问题:D 我正在使用 angular 1.4.7，现在我需要一些树视图。我为此使用了 jsTree，但它将我所有的 ng-repeats 视为一个。这是jsTree的问题还是我做错了什么？如果是 jsTree 的问题，那么你建议在 angular 上对 treeView 使用什么？

关键节点：树看起来不错，但是当我单击其中一个元素时，它只会单击最上面的一个。

这里是代码：

        <div class="col-md4 col-sm-4 col-xs-4" id='UserGroupTree' >

            <ul>
                <li ng-repeat="item in page.treeNodeItems" value='item.UserGroupCode'>{{item.UserGroupName}}
                </li>
            </ul>

            <script>
                $('#UserGroupTree').jstree();
            </script>


        </div>

我的数据是这样的：

HttpService.post("user_group", {}).then(function successCallback(response) {
    vm.treeNodeItems = response.data.returnObject;
}, function errorCallback(response) {
    console.log('error');

});

vm.treeNodeItems 是一个对象。

它returns这样的数据：

returnObject: [{UserGroupCode: "UGR_1", UserGroupName: "Admin", UserGroupType: "PUZ"}]
0: {UserGroupCode: "UGR_2", UserGroupName: "Admin", UserGroupType: "PUZ"}
1: {UserGroupCode: "UGR_11", UserGroupName: "Bini", UserGroupType: "AG"}
2: {UserGroupCode: "UGR_32a1209a96c", UserGroupName: "ssd",…}
3: {UserGroupCode: "UGR_8a06aead39b", UserGroupName: "eniz",…}
4: {UserGroupCode: "UGR_ee3029db538", UserGroupName: "sdsd", UserGroupType: null}

我从 chrome 中获取它，所以可能存在一些语法问题，但它是正确的并且可以工作

Answer 1

加载数据后尝试将代码修改为运行树

HttpService.post("user_group", {}).then(function successCallback(response) {
    vm.treeNodeItems = response.data.returnObject;
    $('#UserGroupTree').jstree();
}, function errorCallback(response) {
    console.log('error');
});

Answer 2

为了回答你的第二个问题，我推荐ya-treeview. There is one more treeView，它使用起来非常简单

ya-treeview 支持事件挂钩、延迟（异步）加载等功能。当树很大时使用它很好，它甚至不修改原始模型。此外，每个 child 都引用了 parent，这在遍历时很有用。

Answer 3

我和@crowz 有同样的问题。

可以不借助@manishrw 建议的 angular 指令来修复！

@Abdelrhman Mohamed 是正确的，确保您调用 $('#UserGroupTree').jstree();在你的树被 angular 完全初始化之后。但是，根据您构建事物的方式，所提供的所有其余代码可能无关紧要。就我而言，我只是移动了一行来解决这个问题。

Answer 4

确保在启动 jstree 之前加载数据源

HttpService.post("user_group", {}).then(function successCallback(response) {
    vm.treeNodeItems = response.data.returnObject;
    $timeout(function(){
            $('#UserGroupTree').jstree(),1000
        })
}, function errorCallback(response) {
    console.log('error');

});

ng-repeat 和 jsTree

ng-repeat and jsTree

treeview

angularjs

ng-repeat

angularjs-ng-repeat