javascript - Angular 多个 ng-options 父/子

Question

我有许多select输入子项，这些子项的数据根据​​父项的选择而变化。

请参阅此Codepen用于形成我的父子关系的数据类型。

我的起始代码在这里:

Controller

$scope.params = ['Sets', 'Reps', 'Colour', 'Time', 'Weight'];

$scope.children = [{
    'Sets': ['1', '2', '3', '4', '5']
  }, {
    'Reps': ['1', '2', '3', '4', '5']
  }, {
    'Colour': ['Red', 'Green', 'Blue', 'Yellow', 'Pink']
  },

];

HTML

<label class="item item-input item-select">
    <div class="input-label positive">
        Param
    </div>
    <select ng-model="param">
        <option ng-repeat="param in params" value="{{param}}">{{param}}</option>
    </select>
</label>
<label ng-show="param" class="item item-input item-select">
    <div class="input-label positive">
        Sets
    </div>
    <select ng-model="param">
        <option ng-repeat="param in params" value="{{param}}">{{param}}</option>
    </select>
</label>

仅当选择相应的父级时，子级才可见。

Answer 1

我会像这样更改模型:

$scope.params = ['Sets', 'Reps', 'Colour', 'Time', 'Weight'];

$scope.children = {
  'Sets': ['1', '2', '3', '4', '5'],
  'Reps': ['1', '2', '3', '4', '5'],
  'Colour': ['Red', 'Green', 'Blue', 'Yellow', 'Pink']
};

然后做这样的事情:

http://codepen.io/anon/pen/RPZzdM