Угловой выбор, ng-init с динамическим значением

Question

Я пытаюсь получить поле выбора, работающее в Angular. Проблема, с которой я столкнулся, - это сделать с ng-init и установить значение по умолчанию для объекта, созданного во время выполнения. Heres мой код:

 <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

В моей ситуации я был в состоянии изменить формат движки данных, чтобы установить объект как:

{"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> 

Answer 2

Вы сомневаетесь, меня как-то путают. Следующий фрагмент - это working, это то, что вы хотите?

'use strict'; 
 
angular.module('DemoApp', []); 
 
angular.module('DemoApp').controller('DemoCtrl', ['$scope', function($scope){ 
 
    $scope.lists={ 
 
    \t production_companies: { "0": "prod 1", "1":"prod_2" }, 
 
    }; 
 
    $scope.settings={ 
 
    \t editing: { 
 
    \t panel: { 
 
     \t 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>