Javascript 无法在angular js中创建动态行和树下拉列表

我正在使用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;
        }
    }
} ]);

module.directive（'treeDropdown'，['$compile'，'$parse'，function（$compile，$parse）{
var template=“{{selected.name}
”；
模板+=“”；
返回{
限制：'E'，
范围：{
测试：“&callFuc”，
数据：'='，
所选：“=”，
测试：“&”，
参数：“&withparam”，
选择：“&onSelect”
},
模板：模板，
控制器：函数（$scope$element）{
ctrl=$scope；
ctrl.isOpen=false；
ctrl.openTree=函数（）{
ctrl.isOpen=ctrl.isOpen？false：true；
}
ctrl.childClick=函数（obj）{
选择设置（ctrl，obj）；
ctrl.isOpen=false；
ctrl.$apply（）；
}
},
链接：函数（范围、元素、属性、ngModel、根范围）{
var onSelectCallback=$parse（attrs.onSelect）；
scope.senddata=函数（obj）{
范围.测试（{msg:obj}）；
};
var list=angular.element（元素[0]。查询选择器（'.list'）；
作用域.$watchGroup（['data'，'selected']，函数（newValues，oldValues，scope）{
html（“”）；
如果（！scope.selected）{
setSelected（范围，空）；
}
var options=getOptions（scope，scope.data，0）；
追加（$compile（options）（scope））；
});
//在下拉列表外单击关闭。。。
角度.element（document）.bind（'click'，函数（事件）{
event.stopPropagation（）；
event.preventDefault（）；
如果（元素！==event.target&&！元素[0]。包含（event.target））{
作用域$apply（函数（）{
scope.isOpen=false；
})
}   
scope.select（）；
});
}
};
函数getOptions（范围、数据、级别）{
var optionUL=角度元素（“
”）；
角度forEach（数据、功能（obj）{
var optionLI=angular.element（“
”）；
var optionA=angular.element（“
”+obj.name+“
”）；
如果（！angular.isUndefined（obj.children）和&obj.children.length）{
var optionC=角度元素（“”）；
optionLI.append（optionC）.append（optionA）；
}否则{
var optionC=“”；
如果（对象类型==“字段”）{
optionC=角度元素（“”）；
}
如果（对象类型==“字段\块”）{
optionC=角度元素（“”）；
}
如果（对象类型==“节点”）{
optionC=角度元素（“”）；
}
optionLI.append（optionC）.append（optionA）；
}
//如果选定id或对象存在，则设置选定选项。。
if（scope.selected==obj）{
所选设置（范围，obj）；
}
optionA.bind（“单击”，函数（）{
范围.儿童点击（obj）；
})
if（对象儿童）{
optionLI.append（getOptions（scope，obj.children，level+1））；
}
optionUL.append（optionLI）；
})
返回期权；
}
选择的功能集（范围，obj）{
如果（obj）{
scope.selected=obj；
scope.senddata({
“obj”：obj
});
}否则{
scope.selected=null；
}
}
} ]);

---

任何帮助都将不胜感激

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

您必须为每一行下拉列表提供不同的ID。因此，只需添加行号（如果您是动态创建的，则使用索引值）+您的id，以便区分每个项目。然后，您可以使用单个项目的id更新它