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

Question

我想知道在更新多个select列表时是否有一种方法。

来澄清问题。我有这个布局

​

​

我想要实现的是，当我在第一级中更改kaviar的值时，更改也会应用到下一个级别。

一个例子可以是：

• 一级
  • 0×粮食
  • 3xkaviar

​

• 2级
  • 0×粮食
  • 3xkaviar

​

• 3级
  • 0×粮食
  • 3xkaviar

​

现在我想把二级的kaviar的数量改为4，然后自动地改变三级的数量。最终看起来会是这样。

• 一级
  • 0×粮食
  • 3 x kaviar //此处不变

​

• 2级
  • 0×粮食
  • 4辆kaviar /在这里增加一辆

​

• 3级
  • 0×粮食
  • 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调用，然后在那里操作我更改过的那个级别。

谢谢大家的输入^^