角度選擇，具有動態值的ng-init

Question

我想讓一個選擇框在Angular中工作。 我遇到的問題是使用ng-init並從運行時期間創建的對象中設置其默認值。 這是我的代碼：

        <select 
            ng-model="settings.editing.panel.data.production_company"
            ng-change="settings.editing.panel.data.production_company = selectValue"
            ng-init="selectValue = settings.editing.panel.data.production_company"  
        >
            <option 
                ng-repeat="(key, value) in lists.production_companies" 
                value="{{key}}"
                ng-selected="{{selectValue}}" 
                >
                    {{value}}
                </option>
        </select>

“ lists.production_companies”是名稱的簡單鍵值數組，由初始頁面呈現期間填充，由ajax更新。

對象“ settings.editing.panel.data”以NULL開頭，但后來加載了包含屬性“ production_company”的格式正確的對象。

我發現將ng-init設置為“ ng-init =“ selectValue = 3”之類的東西可以正常工作。設置$ scope.test = 3，然后設置“ ng-init =“ selectValue = test”也可以。

但是，我的動態值不起作用。 如何在運行時使用我擁有的設置使用動態創建的對象來設置此選擇框的值？

Answer 1

您的問題使我感到困惑。 以下代碼段是working代碼，這就是您想要的嗎？

 'use strict'; angular.module('DemoApp', []); angular.module('DemoApp').controller('DemoCtrl', ['$scope', function($scope){ $scope.lists={ production_companies: { "0": "prod 1", "1":"prod_2" }, }; $scope.settings={ editing: { panel: { data: null } } }; $scope.setData=function(data){ $scope.settings.editing.panel.data={ production_company: data }; }; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <select ng-model = "settings.editing.panel.data.production_company"> <option ng-repeat = "(key, value) in lists.production_companies" value = "{{key}}">{{value}}</option> </select> <div>You select: {{settings.editing.panel.data.production_company}}</div> <button ng-click="setData('0')">Set Data to Prod1</button> <button ng-click="setData('1')">Set Data to Prod2</button> </div> 

Answer 2

<select 
            ng-model="settings.editing.panel.data.production_company"
            ng-options = "option as option.keyName for option in list.production_companies"
        > <!--set keyName equal to your object's key-->

        </select>

然后在您的控制器中

$scope.settings.editing.panel.data.production_company = list.production_companies[0] // Or which value you want to assign

Answer 3

在我的情況下，我能夠更改后端數據格式以設置一個對象，例如：

{"id": 1, "name":"prod comp 1"} 

然后相應地更改我的選擇模型。 事后看來，無論如何我都需要ID。

<select 
    ng-model="settings.editing.panel.data.production_company"
>
    <option 
        ng-repeat="option in settings.lists.production_companies" 
        value="{{option.id}}"
        ng-selected="{{option.id}} == settings.editing.panel.data.production_company"
    >
        {{option.name}}
    </option>
</select>