Question

我需要创建参数的搜索查询并将其发送到服务器。我已经创建了用户填充值的下拉列表。以下是用户界面上的代码：

              <div ng-repeat="criteria in criterias">
                <div class="m-b">
                  <div class="form-group s-b" style="width: 150px;">
                    <span>classification</span>
                    <select  ng-model="criteria.selectedClassification" class="form-control" id="classification" ng-options="classification for classification in classification" ng-change="handleClassification(criteria)" style="max-width:100%"></select>
                  </div>
                  <div class="form-group s-b" style="width: 150px;">
                    <span>Config</span>
                    <select id="config" ng-model="criteria.selectedConfig" ng-options="config for config in config" class="form-control" ng-change="handleConfig(criteria)" style="max-width:100%" ></select>
                  </div>
                  <div class="form-group s-b" style="width: 150px;">
                    <span>Attribute</span>
                    <select id="attribute" class="form-control" ng-options="attribute for attribute in attributes"  ng-model="criteria.selectedAttribute" style="max-width:100%;" ng-change="handleAttrChange(criteria  )"></select>
                  </div>
                  <div class="form-group s-b" style="width: 150px;">
                    <span>Predicate</span>
                    <select class="form-control" ng-model="criteria.predicate"  style="max-width:100%">
                      <option value="matches">Matches</option>
                      <option value="not-matches">Not Matches</option>
                    </select>
                  </div>
                  <div class="form-group s-b" style="width: 100px;">
                    <span>Value</span>
                    <select class="form-control" name="account" ng-model="criteria.value" ng-options="item for item in values" style="max-width:100%">
                    </select>
                  </div>
                  <div class="form-group s-b" style="margin-top: 20px;">
                    <span>
                    <button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()"><i class="fa fa-plus"></i>
                    </button>
                    <button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)"><i
                            class="fa fa-minus"></i></button>
                    </span>
                  </div>
                </div>
              </div>

我已将代码包装在重复内部，以便用户可以创建多个条件（每个条件都有一个过滤条件）。用户可以通过单击+图标来创建条件。我在使用一个标准时遇到问题，在配置上进行的任何更新都是设置所有criteia的属性而不是当前标准。

我已经创建了一个工作的plunker来演示这个。请让我知道我哪里出错了。

链接到Plunker - Link to Plunker

Answer 1

问题是您的属性列表。无论何时更改配置，您都在调用正在更改属性列表的函数。每行标准都在查看相同的属性数组。因此，如果您更改第一行和第三行中的配置，它们都会影响设置的属性，因此它会对数组进行两次过滤。

为避免这种情况，您的每一行都应该有一个您要过滤的查找数组。然后在ng-change的函数内部，过滤当前条件中的数组，以便每行条件都使用它自己的查找。

无法从Angularjs控制器更新数组中的给定项

1 个答案: