【问题标题】:AngularJs select directive with init value from another scope attributeAngularJs 选择具有来自另一个范围属性的初始值的指令
【发布时间】:2014-08-27 22:33:22
【问题描述】:

我无法在使用 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>

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

【问题讨论】:

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


    【解决方案1】:

    这是一个有效的 plunkr: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
                    }
                }
    
            }
        })
    

    【讨论】:

    • 非常感谢!!我离得太近了! :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-10-21
    相关资源
    最近更新 更多