Angular 多个 ng-options 父/子答案

【问题标题】：Angular multiple ng-options parent / childAngular 多个 ng-options 父/子
【发布时间】：2015-09-03 05:37:46
【问题描述】：

我有许多 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>

只有在选择了相应的父级时，子级才可见。

【问题讨论】：

那么你的问题是什么？

标签： javascript angularjs ionic-framework ng-options

【解决方案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

【讨论】：

如果您不想允许没有孩子的参数，在这种情况下，我会根据孩子挑选参数。 lodash 示例：$scope.params = _.keys(children);
我希望在提交时从$scope 获取数据，这可以通过传递function(param) 来实现，这将是理想的。那么我希望看到param.Sets 等...

【解决方案2】：

我不确定我在这里看到了一个问题；）但是看看你的代码，奇怪的是你在两个不同的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>

【讨论】：