级联选择数据绑定

Question

先看看我的小提琴

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>

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

在我的小提琴中，您可以看到您更改了“Level1-0”的值，在“Level2-0”下面的选择是正确的，但是binded是否也是“级别2-6”.

怎么了？

Answer 1

问题是，您有一个ng-重复，其中您使用相同的对象作为模型的每一个项目重复，这意味着它们将冲突和相互影响。

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

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