Angular 多个 ng-options parent / child

Question

我有多个 select 输入 children 那是根据 parents 选择的数据变化。

请参阅此 Codepen 了解将形成我的 parent child 关系的数据类型。

我的起始代码在这里：

控制器

$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>

children 仅在选择相应的 parent 时可见。

Answer 1

我不确定我在这里看到了问题 ;) 但是看看你的代码，奇怪的是你在两个不同的 selects 中设置了相同的模型。

尝试将第二个中的 ng-model 更改为不同的内容，例如childParam:

  <script id="popup-template.html" type="text/ng-template">
    <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="childParam">
        <option ng-repeat="param in params" value="{{param}}">{{param}}</option>
      </select>
    </label>
  </script>

Answer 2

我会像这样更改模型：

$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

Angular 多个 ng-options parent / child

Angular multiple ng-options parent / child

javascript

angularjs

ionic-framework

ng-options