关于angular的ng-repeat中ng-model配合ng-checked的使用问题

Question

如下图所示：
我要实现这样一个二级联动功能，当选中左边的省市会勾选右边对应的市或区，左右两边都是数组ng-repeat出来的，数组格式如图二所示，我给左边框设置ng-model=‘all’指令，右边对应的市或区设置对应的ng-checked=‘all’，ng-model=‘x’,我现在能实现当勾选左边的省，能全部勾选右边的市，但是当勾选右边的市也会全部勾选或部分左边的省，而不是勾选对应的省，我检查过元素发现左边所有的ng-repeat的元素都有ng-model=‘all’指令，但是怎么给左边对应的省设置唯一或者对应的ng-model呢？请大神赐教！

Answer 1

把all的类型改完object的结构来维护一个Map数据结构，比如

// model.ts
interface City {
    id: number,
    name: string,
    checked: boolean
}

interface Province {
    id: number,
    name: string,
    checked: boolean,
    cities: City[]
}

const all: Province[] = [
    {
        id: 1,
        name: 'xx市',
        checked: true,
        cities: [
            {
                id: 1,
                name: 'foo',
                checked: false,
            },
            {
                id: 2,
                name: 'bar',
                checked: false,
            },
            {
                id: 3,
                name: 'baz',
                checked: true,
            }
        ] 
    }
]

之后左边的ng-model就可以分开绑定了，比如

<li ng-repeat="item in all">
    <input ng-model="item.checked" type="checkbox">
</li>

右边同理，之后做一些级联数据变更的逻辑即可，比如左边选右边全选等等的操作

如果数据源不能够达到all的数据格式，需要做一个转换。

Answer 2

省市的数据结构分开两个这样写会很麻烦，建议你写到一个里面去。会简单很多，并且很清晰