Question

HTML：

<select class="form-control" name="paramType" ng-change="setParamC($index)" ng-model="row.ParameterT" ng-options="item.ReferenceValue for item in pagemodel.ParamTList" required></select>

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

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

我有一个数据对象列表，这些数据对象是通过ajax调用从服务器返回到前端的。每个对象都包含指向其他对象的三个属性（ParameterT，ParameterC和ParameterN）。

我还具有三个对象列表，这些对象用作我的三个下拉菜单的选项。这三个列表是由服务器生成的，并通过相同的ajax调用发送到前端。

我的下拉选项的三个对象列表和主数据对象中的三个属性都是相同的对象类型。

这是我的第一个列表ParamTList中的数据，如前端所示：

(2) [{…}, {…}]
0:
    $$hashKey:"object:503"
    ReferenceCode:1
    ReferenceDomain:"AGG_TIER_PARAMETER_TYPE"
    ReferenceParentCode:null
    ReferenceParentDomain:null
    ReferenceValue:"Static"
    __proto__:Object
1:
    $$hashKey:"object:504"
    ReferenceCode:2
    ReferenceDomain:"AGG_TIER_PARAMETER_TYPE"
    ReferenceParentCode:null
    ReferenceParentDomain:null
    ReferenceValue:"Dynamic"
    __proto__:Object
length:2
__proto__:Array(0)

这是ParameterT对象：

{ReferenceDomain: "AGG_TIER_PARAMETER_TYPE", ReferenceCode: 2, ReferenceValue: "Dynamic", ReferenceParentDomain: null, ReferenceParentCode: null}
    ReferenceCode:2
    ReferenceDomain:"AGG_TIER_PARAMETER_TYPE"
    ReferenceParentCode:null
    ReferenceParentDomain:null
    ReferenceValue:"Dynamic"
    __proto__:Object

用作ParameterT的{{1}}对象与ng-model列表中使用的一个对象相同，除了ng-options属性。我猜这就是为什么绑定不会发生的原因。 $$hashKey对象是子对象，但它的父对象（主数据对象）确实具有ParameterT属性。

对吗？如果是，我该如何解决？如果不是，那我在做什么错了？

我可以使用字符串而不是对象来完成所有这些操作，但是我失去了根据先前的下拉菜单设置过滤下拉菜单选择的功能。

这目前在生产环境中有效，因为通过循环浏览所有数据对象，然后循环浏览搜索匹配项的三个选项列表，在前端设置了三个子属性。这表现不佳，这就是为什么我试图将诸如此类的低效率的东西移到服务器上的原因。

Answer 1

说明：

您需要在每个track by中使用一个ng-options表达式，这是标准做法。

原因是，如果不这样做，Angular会在重复数据上创建$$hashkey属性，以进行DOM更改跟踪。并且此$$hashkey导致select对象与您的http数据（不具有该属性）不匹配。

使用track by，Angular只是比较指定属性的相等性，而不是整个对象（反之，$$hashkey并未添加。）

解决方案：

因此，以您的ParamT为例，并假设每个对象上都有一个唯一的属性（例如ReferenceCode），它看起来像：

ng-options="item.ReferenceValue for item in pagemodel.ParamTList track by item.ReferenceCode"

否则，您可以尝试：

ng-options="item.ReferenceValue for item in pagemodel.ParamTList track by $index"

根据集合中的位置进行跟踪。

这里是Working Fiddle;

AngularJS-数据模型不在下拉列表中绑定

1 个答案: