Question

我有一些select输入子项，根据父项选择，数据会发生变化。

请参阅此Codepen了解将构成我的父子关系的数据类型。

我的起始代码在这里：

控制器

$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

Answer 2

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

尝试将第二个中的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>

角度多重ng选项父/子

2 个答案: