Question

首先看看我的fiddle

JavaScript的：

function CountryCntrl($scope) {
    $scope.filters = {};
    $scope.categories = [{
    "id": 1,
    "title": "Company",
    "children": [{
        "id": 2,
        "title": "About",
        "children": [{
            "id": 6,
            "title": "Company profile",
            "children": [],
            "isRoot": false
        }],
        "isRoot": false
    } ..
}

HTML：

<div class="row" ng-controller="CountryCntrl">
    <div class="col-lg-12">
        <h4>Filter by:</h4>
    </div>
    <div class="col-lg-12">
        <form>
            <div class="row">
                <div class="col-xs-4" ng-repeat="cat in categories" ng-if="cat.isRoot==true">
                    <div class="form-group">
                        <select ng-if="cat.isRoot==true" class="form-control" ng-model="filters.rootCat" ng-options="sub_cat.title for sub_cat in cat.children track by sub_cat.id">
                            <option value="">level 1 - {{$index}}</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <select class="form-control" ng-model="filters[cat.id]" ng-options="sub_sub_cat.title for sub_sub_cat in filters.rootCat.children track by sub_sub_cat.id">
                            <option value="">level 2 - {{$index}}</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

我无法显示第二级选择的选项，与第一级相关。

在我的小提琴中你可以看到你改变了“等级1-0”的值，下面的选择“等级2 - 0”被正确填充，但是binded也是“等级2 - 6”。

怎么了？

Answer 1

问题在于你有一个ng-repeat，你在其中使用相同的对象作为重复的每个项目的模型，这意味着它们会相互冲突并相互影响。

最简单的解决方案可能是将filters.rootCat更改为filters['rootCat'+$index]。

这样可以确保每列下拉列表都有自己的模型。

级联选择数据绑定

1 个答案: