javascript - 无法在 Angular js中创建动态行和树下拉列表

Question

我正在努力使用 Angular js 添加动态行，它工作正常，但我还需要在行中添加树下拉列表，但单击“添加行”按钮会在所有行中填充相同的数据。

这是我的代码和行快照

我正在使用 angularjs，但它不起作用，我听说我们可以使用回调来防止以前的点击事件，但我不知道如何使用。

请帮助我

<div class="tree-drop">
    <tree-dropdown class="tree-dropdown" call-fuc="test()"
        withparam="param(name)" testing="selectedNodeData(msg)"
        id="tree-dropdown" data="FarmLands" on-select="selectedLand()"
        ng-model="selectedFarmData[0]" selected="selectedFarmData[0]">
    </tree-dropdown>
</div>


module.directive('treeDropdown', [ '$compile','$parse' ,function($compile,$parse) {
    var template = "<div id='treedata' class='select' ng-click='openTree()' ng-model='selected.name'><p>{{selected.name}}</p></div>";
    template += "<div class='list' ng-show='isOpen'></div>";
    return {
        restrict : 'E',
        scope : {
            test : "&callFuc",
            data : '=',
            selected : '=',
            testing : "&",
            param : "&withparam",
            select: '&onSelect'
        },

        template : template,
        controller : function($scope, $element) {

            ctrl = $scope;
            ctrl.isOpen = false;

            ctrl.openTree = function() {
                ctrl.isOpen = ctrl.isOpen ? false : true;
            }

            ctrl.childClick = function(obj) {
                setSelected(ctrl, obj);
                ctrl.isOpen = false;
                ctrl.$apply();
            }
        },
        link : function(scope, element, attrs, ngModel,rootScope) {

            var onSelectCallback = $parse(attrs.onSelect);
            scope.senddata = function(obj) {
                scope.testing({msg:obj});
            };

            var list = angular.element(element[0].querySelector('.list'));

            scope.$watchGroup([ 'data', 'selected' ], function(newValues, oldValues, scope) {
                list.html('');

                if (!scope.selected) {
                    setSelected(scope, null);
                }
                var options = getOptions(scope, scope.data, 0);
                list.append($compile(options)(scope));
            });

            // Close on click outside the dropdown...
            angular.element(document).bind('click', function(event) {
                event.stopPropagation();
                event.preventDefault();
                    if (element !== event.target && !element[0].contains(event.target)) {
                        scope.$apply(function() {
                            scope.isOpen = false;
                        })
                    }   
                     scope.select();

            });
        }
    };

    function getOptions(scope, data, level) {
        var optionUL = angular.element("<ul></ul>");
        angular.forEach(data, function(obj) {
            var optionLI = angular.element("<li class=''></li>");
            var optionA = angular.element("<p class='level-" + level + "'> " + obj.name + "</p>");
            if (!angular.isUndefined(obj.children) && obj.children.length) {
                var optionC = angular.element("<i class='fa fa-plus level-" + level + "'></i>");
                optionLI.append(optionC).append(optionA);
            } else {
                var optionC = "";
                if (obj.type == "field") {
                    optionC = angular.element("<i class='fa fa-bookmark-o block-icon level-" + level + "'></i>");
                }
                if (obj.type == "field_block") {
                    optionC = angular.element("<i class='fa fa-envira zone-icon level-" + level + "'></i>");
                }
                if (obj.type == "node") {
                    optionC = angular.element("<i class='fa fa-arrow-circle-right farm-icon level-" + level + "'></i>");
                }
                optionLI.append(optionC).append(optionA);
            }

            // Set selected option if selected id or object exist..
            if (scope.selected == obj) {
                setSelected(scope, obj);
            }

            optionA.bind("click", function() {
                scope.childClick(obj);
            })

            if (obj.children) {
                optionLI.append(getOptions(scope, obj.children, level + 1));
            }
            optionUL.append(optionLI);
        })

        return optionUL;
    }

    function setSelected(scope, obj) {
        if (obj) {
            scope.selected = obj;
            scope.senddata({
                "obj" : obj
            });
        } else {
            scope.selected = null;
        }
    }
} ]);

如有任何帮助，我们将不胜感激。

Answer 1

我们尝试使用动态索引，但当它创建重复的下拉列表时，它会卡住。