一个选择中的更改应适用于多个选择

Question

我想知道是否有更新多个select列表的方法。

澄清问题。我有这个布局

我想要达到的目标是，当我在第一级更改kaviar的值时，更改将应用​​于下一级别。

一个例子可能是：

• 1级
  • 0 x Grain
  • 3 x kaviar
• 等级2
  • 0 x Grain
  • 3 x kaviar
• 等级3
  • 0 x Grain
  • 3 x kaviar

现在我想将第二级kaviar中的金额更改为4.然后自动更改第三级中的金额。最终会看起来像这样。

• 1级
  • 0 x Grain
  • 3 x kaviar //此处无变化
• 等级2
  • 0 x Grain
  • 4 x kaviar //在此处添加了一个
• 等级3
  • 0 x Grain
  • 4 x kaviar //本身更新

如果有帮助

我用angularJS做了这个布局，它看起来像这个

控制器的

    $scope.template = {
        ressource: {
            level: [{
                id: 0,
                gain: [{
                    id: 0,
                    amount: 0,
                    ressource: $scope.ressources.basic[0]._id
                }]
            }]
        }
    };

以及HTML

       <div class="vertical-spacing">
            <label>Ressource gain per level</label>

            <ul class="list-group">
                <li ng-repeat="level in template.ressource.level track by $index" 
                    class="list-group-item" 
                    ng-hide="template.ressource.level.indexOf(level) === 0">
                    <span>
                        Level: {{ template.ressource.level.indexOf(level) }}
                    </span>

                    <span class="pull-right">
                        <a href="" ng-click="removeLevel(level)">
                            <span class="glyphicon glyphicon-remove"></span>
                        </a>
                    </span>

                    <ul>
                        <li class="list-group-item" ng-repeat="gain in level.gain track by gain.id">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>Amount</label>
                                    <input type="number" 
                                           class="form-control"
                                           ng-model="gain.amount" 
                                           min="1" 
                                           required>
                                </div>

                                <div class="form-group">
                                    <label>Ressource</label>
                                    <select required 
                                            ng-model="gain.ressource" 
                                            ng-init="gain.ressource = gain.ressource || ressources.basic[0]"
                                            ng-options="ressource._id as ressource.name | capitalize for ressource in ressources.basic"
                                            class="form-control selectWidth">
                                        <option style="display:none" value="" disabled>select a ressource</option>
                                    </select>
                                </div>

                                <span class="pull-right">
                                    <a href="" ng-click="removeGain(level, gain)">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </a>
                                </span>
                            </div>
                        </li>
                    </ul>

                    <span>
                        <a href="" ng-click="addGain(level)" ng-hide="(level.gain.length + 1) > ressources.basic.length">
                            <span class="glyphicon glyphicon-plus"></span> Add ressource
                        </a>
                    </span>
                </li>
            </ul>

            <span>
                <a href="" ng-click="addLevel()">
                    <span class="glyphicon glyphicon-plus"></span> Add level
                </a>
            </span>
        </div>

Answer 1

AngularJS有一个名为ng-change的函数，它允许我在代码中的任何input标记上注册更改。然后我只是在我的控制器中为ng-change调用了一个函数，然后在我改变之后操纵了这些级别。

感谢所有输入^^