ngOptions - значение не определено

Question

Я работаю с AngularJS, и я сгенерировал объект с свойством size, который содержит массив объектов.

var product = [ 
    // .. 
    sizes: [ 
    {choice: 'one', order: 1}, 
    {choice: 'two', order: 2}, 
    {choice: 'three', order: 3} 
    ] 
    //.. 
]; 

На стороне просмотра я генерировать поле выбора, как:

<select ng-init="size = product.sizes[0]" ng-options="size.choice for size in product.sizes" ng-model="size"></select> 

Это работает, но когда я создаю кнопку, чтобы получить текущее выбранное значение выбора возвращает неопределенное: alert($scope.size);

Я продублировал проблему here. Кроме того, только для смеха Я воссоздал одно и то же (?) В другом CodePen here.

Второй работает так, как я хочу, но не первым. Я сделал оба, но я не могу понять, почему второй работает и первый делает.

Answer 1

Это классическая проблема в угловых условиях. Это потому, что вы используете ng-if, который создает дочернюю область. вам нужно установить свою модель в someObject.size и изменить все ссылки на это. А затем в контроллер поместите $ scope.someObject = {};