AngularJs使用另一个范围属性的init值选择指令

时间:2014-08-27 22:33:22

标签: angularjs ng-options angularjs-ng-init

我无法在使用AngularJs的选择选择器中获取ng-init指令。即使id productQuantity / unitName有值,也没有选择任何选项。

这里我的JSON对象是如何形成的:

inventoryLines: Array[1]
 0: Object
   permitedFormatUnits: Array[2]
     0: Object
       unitName: "Kilo"
     1: Object
       unitName: "Gramme
   productQuantity: Object
     formatUnit: Object
       unitName: "Gramme"
     quantity: 456

我需要permitedFormatUnits作为用户可以做出的选择,productQuantity / formatUnit是ng-init值,ng-model值也很好。

这是我的html,其中line代表ng-repeat循环中的inventoryLines:

 <select class="selectpicker" name="unitFormat"
   ng-init="formatUnit = line.productQuantity.formatUnit.unitName"
   ng-model="line.productQuantity.formatUnit"
   ng-options="formatUnit as formatUnit.unitName for formatUnit in line.permitedFormatUnits">
 </select>

非常感谢你的帮助,希望我已经足够清楚了! :

1 个答案:

答案 0 :(得分:0)

这是一个有效的傻瓜:http://plnkr.co/edit/TyWqjW2KQ0LEngWX9uVx

您需要使用track by才能使其有效(请参阅文档 - https://docs.angularjs.org/api/ng/directive/select):

<select class="selectpicker" name="unitFormat"
        ng-init="formatUnit = line.productQuantity.formatUnit"
        ng-model="line.productQuantity.formatUnit"
        ng-options="formatUnit as formatUnit.unitName for formatUnit in line.permitedFormatUnits track by formatUnit.unitName">
</select>   

js:

angular.module('myApp', [])
    .controller('myCtrl', function($scope) {
        $scope.line = {
            permitedFormatUnits: [{
                unitName: "Kilo"
            }, {
                unitName: "Gramme"
            }],
            productQuantity: {
                formatUnit: {
                    unitName: "Gramme",
                    quantity: 456
                }
            }

        }
    })