なぜこの問題にだまされたのかを理解しようと何時間も費やしました。
フィドル: http://jsfiddle.net/hanspc/ZJyTW/
フィドルは、私の問題の単純化された例です。製品にいくつかのプロパティを設定し、フィールド値を他のフィールドに基づいてフィルタリングするという考え方です。(例: type=car の場合は「飛行機の翼」オプションを表示しないでください :-) )
<div class="productField" ng-repeat="field in product.fields | orderBy:order">{{field.name}} (hidden: {{field.disabledValue}}):
<div class="productFieldContent" ng-hide="field.disabledValue">
<select ng-model="product.values[field.name]" ng-options="design.text for design in field.values | filterValues:field:product.fields:product">
</select>
<button ng-click="$parent.field.disabledValue = !$parent.field.disabledValue">Toggle hide/show</button>
</div>
</div>
Fiddle では、field1=value 1 および field2=Value 2 になるまで、3 番目のフィールドは非表示になります。
if (arrayToReturn.length == 0) {
fieldData.disabledValue = true;
} else {
fieldData.disabledValue = false;
}
ご覧のとおり、他のフィールドが正しく設定されている場合、フィールド 3 が製品 1 に表示されます。しかし、{{field.disableValue}}
フィールド名の横にあるバインディングには正しい値が表示されません。
ここで最も奇妙な部分: 製品 2 のフィールド 3 は非表示のままですが、正しい値 (false) が製品 2 のフィールド 3 の横に表示されます。
スコープの継承で迷子になったと確信しています.2つのngRepeatsが原因だと確信していますが、何が起こっているのか誰か教えてもらえますか? :-)
ありがとう