Question

我拥有的是父级kendo ui下拉列表和一个孩子。我想要级联工作，这是有效的。问题是我需要它在ng-repeat中工作样本数据集：

$scope.Doctypes = [
    {"Area": "parent01", "docType": "child01ofParent01", "docDrawer": "grandchild01ofParent01" },
    {"Area": "parent01", "docType": "child02ofParent01", "docDrawer": "grandchild02ofParent01" },
    {"Area": "parent01", "docType": "child03ofParent01", "docDrawer": "grandchild03ofParent01" },
    {"Area": "parent02", "docType": "child01ofParent02", "docDrawer": "grandchild01ofParent02" },
    {"Area": "parent02", "docType": "child02ofParent02", "docDrawer": "grandchild02ofParent02" },
    {"Area": "parent02", "docType": "child03ofParent02", "docDrawer": "grandchild03ofParent02" },
    {"Area": "parent03", "docType": "child01ofParent03", "docDrawer": "grandchild01ofParent03" },
    {"Area": "parent03", "docType": "child02ofParent03", "docDrawer": "grandchild02ofParent03" },
    {"Area": "parent04", "docType": "child01ofParent04", "docDrawer": "grandchild01ofParent04" },
    {"Area": "parent04", "docType": "child02ofParent04", "docDrawer": "grandchild02ofParent04" }
];

接下来，每个下拉列表都有kendo自定义选项，如下所示。

    $scope.docTypeAreaCustomOptions = {
    autobind:true,
    filter:"contains",
    dataSource: $scope.Doctypes,
    dataTextField: "Area",
    dataValueField: "Area",
    optionLabel:"Select a Document Type Area"
};
$scope.docTypeCustomOptions = {
    autobind: false,
    filter:"contains",
    dataSource: $scope.Doctypes,
    dataTextField: "docType",
    dataValueField: "docType",
    cascadeFrom:"selectedDTA",//This is the id from the first(parent) dropdown list.
    optionLabel:"Select a Document Type",
};

在我的视图中，我有以下HTML：

 <tr data-ng-repeat="file in files">
                <td style="text-align:left;background-color:transparent;width:25px">
                    <input alt="Delete Document" height="20px" width="20px" type="image" src="delete.png" data-ng-click="delete(file, $event, $index)"/>
                    <!--<button data-ng-click="delete(file, $event, $index)">Delete</button>-->
                     &nbsp; {{ file.name }}</td>
                <td>
                        <select kendo-drop-down-list 
                         id="selectedDTA"
                         data-ng-model="file.selectedDocTypeArea" 
                         data-ng-change="onChange(file,$event,$index)"                   
                         style="width:200px;" 
                         k-options="docTypeAreaCustomOptions"
                         >
                        </select>
                         <br><span class="edmcError" data-ng-show="!file.selectedDocTypeArea">required</span>
                 </td>
                <td> 
                        <select kendo-drop-down-list
                         id="selectedDT"
                         data-ng-model="file.selectedDocType" 
                         k-options="docTypeCustomOptions"
                         data-ng-change="onChange(file,$event,$index)"           
                         style="width:200px;" 
                         >
                        </select>
                        <br><span class="edmcError" data-ng-show="!file.selectedDocType">required</span>

                 </td>
            </tr>

在ng-repeat中，它认为自id字段以来每个父节点都是相同的。因此，当您选择第一个父项时，它会为每一行设置子项。

由于乔

Answer 1

我找到了解决方案。我将所有代码从customoptions移动到视图内部。父下拉列表

<select kendo-drop-down-list
                        name="documentTypeArea" 
                        id="selectedDTA{{$index}}"
                        data-ng-model="file.ddlDTA" 
                        style="width:200px;"
                        k-data-source="docTypes"
                        k-data-text-field="'Area'"
                        k-data-value-field="'Area'"
                        k-filter="'contains'"
                        k-option-label="'Select a Document Type Area'">
                        </select>

子下拉列表

                            <select kendo-drop-down-list
                        name="documentType" 
                        data-ng-model="file.ddlDT" 
                        k-data-source="docTypes"
                        k-data-text-field="'docType'"
                        k-data-value-field="'docType'"
                        k-filter="'contains'"
                        k-cascade-from="'selectedDTA{{$index}}'"
                        k-option-label="'Select a Document Type'"
                        >
                        </select>

ng-repeat内的Kendo UI级联下拉列表

1 个答案: