AngularJS - 數據模型不會在下拉列表中綁定

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調用發送到前端。

我的下拉選項的 3 個對象列表和我的主數據對象中的三個屬性都是相同的對象類型。

這是我的第一個列表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

用作ng-model的ParameterT對象與ng-options列表中使用的一個對象相同，除了$$hashKey屬性。 我猜這就是綁定不會發生的原因。 ParameterT對象是一個子對象，但它的父對象，即主數據對象，確實有一個$$hashKey屬性。

那是對的嗎？ 如果是，我該如何解決這個問題？ 如果不是，我做錯了什么？

我可以用字符串而不是對象來完成所有這些，但我無法根據前一個下拉列表的設置過濾下拉選擇。

這目前在生產中有效，因為三個子屬性是在前端設置的，通過循環所有數據對象，然后循環搜索匹配項的三個選項列表。 這表現不佳，這就是為什么我試圖將這樣低效的東西移到服務器上。

Answer 1

解釋：

您需要在每個ng-options track by表達式使用track by ，這是標准做法。

原因是，如果您不這樣做，Angular 會在您重復的數據上創建一個$$hashkey屬性，用於 DOM 更改跟蹤。 而這個$$hashkey會導致選擇對象與您的 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"

它按集合中的位置進行跟蹤。

這是一個工作小提琴；