Question

HTML：

<tbody ng-repeat="row in pagemodel.Tiering|filteraggregator">
    <!-- more stuff here...  -->
    <select class="form-control" name="paramType" ng-change="setParamC(row.RowID)" ng-model="row.ParameterT" ng-options="item.ReferenceValue for item in pagemodel.ParamTList track by $index" required></select>

    <select class="form-control" name="paramCat" ng-change="validatePCat(row.RowID)" ng-model="row.ParameterC" ng-options="item.ReferenceValue for item in pagemodel.ParamCList|filter:{ReferenceParentCode:row.ParameterT.ReferenceCode , ReferenceParentDomain:row.ParameterT.ReferenceDomain} track by $index" required></select>

    <select class="form-control" name="paramName" ng-change="setParamV(row.RowID,0)" ng-model="row.ParameterN" ng-options="item.ReferenceValue for item in pagemodel.ParamNList|filter:{ReferenceParentCode:row.ParameterC.ReferenceCode , ReferenceParentDomain:row.ParameterC.ReferenceDomain} track by $index" required></select>

</tbody>

Angular-JS：

tieringController.prototype.setParamC = function(index) {
    var scope = angular.element(document.getElementById("frmtiering")).scope();

    scope.pagemodel.Tiering[index].ParameterC="";
    scope.pagemodel.Tiering[index].ParameterN = "";
    scope.pagemodel.Tiering[index].ParameterValue = "";
    scope.pagemodel.Tiering[index].ValidatePc = false;
}

tieringController.prototype.validatePCat = function (index) {
    // this complex code merely looks for duplicate combinations in the dropdown settings
    var scope = angular.element(document.getElementById("frmtiering")).scope();
    scope.pagemodel.Tiering[index].ValidatePc = false;
    for (var i = 0; i < scope.pagemodel.Tiering.length; i++) {
        if (i != index && scope.pagemodel.Tiering[i].IsActive) {
            if (scope.pagemodel.Tiering[i].AggregatorName == scope.pagemodel.Tiering[index].AggregatorName
            && scope.pagemodel.Tiering[i].ParameterC == scope.pagemodel.Tiering[index].ParameterC) {
            if(scope.pagemodel.Tiering[index].ParameterN !='' && (scope.pagemodel.Tiering[i].ParameterN == scope.pagemodel.Tiering[index].ParameterN))  {
                scope.pagemodel.Tiering[index].ValidatePc = true;
                scope.submitted = false;
                }
            }
        }
    }
}

我有一个通过ajax调用从服务器返回到前端的数据对象的列表。

每个对象包含指向其他子对象的三个属性（ParameterT，ParameterC和ParameterN）。这些属性中的每一个都是下拉列表的初始值。为了使绑定生效，我必须添加track by $index，但这样做“破坏了”我的过滤。

我正在使用过滤功能来更新第二个和第三个下拉列表中的可用选项。因此，第一个下拉菜单的设置会导致第二个下拉菜单通过过滤显示不同的选项集。第二个下拉菜单的设置使第三个下拉菜单通过过滤显示不同的选项集。

当不包含track by $index时，此方法可以正常工作。当我包含track by $index时，过滤将不再起作用。初始选项集已正确包含在列表中，但是更改了第一个下拉列表后，它将不再更新第二个下拉列表的选项集。

编辑：

没有track by $index，这就是我的下拉菜单：

<select class="form-control ng-pristine ng-valid ng-valid-required ng-touched" name="paramType" ng-change="setParamC(row.RowID)" ng-model="row.ParameterT" ng-options="item.ReferenceValue for item in pagemodel.ParamTList" required="">
    <option value="?" selected="selected"></option>
    <option label="Static" value="object:478">Static</option>
    <option label="Dynamic" value="object:479">Dynamic</option>
</select>

使用track by $index时，我的下拉菜单如下所示：

<select class="form-control ng-pristine ng-valid ng-valid-required ng-touched" name="paramType" ng-change="setParamC(row.RowID)" ng-model="row.ParameterT" ng-options="item.ReferenceValue for item in pagemodel.ParamTList track by $index" required="">
    <option label="Static" value="0">Static</option>
    <option label="Dynamic" value="0" selected="selected">Dynamic</option>
</select>

您会注意到，使用track by $index会使我的选项值为零。这可能就是级联下拉列表未正确过滤的原因。

所以...我做错了什么吗？

AngularJS-使用“按$ index跟踪”

0 个答案: