ng-model undefined in controller

Question

ng-model У меня в html есть точка в нем. давайте взглянем

step1.html файл

<div class="col-xs-12 col-sm-9"> 
    <select id="plateId" ng-model="selectedPlate.plate" ng-options="plate.id as (plate.wafer_id + ' - ' + plate.serial_number) for plate in plates" /> 
    <option value="">Select</option> 
    </select> 
</div> 

Это просто форма-мастер с помощью UI-маршрутизатор.

Это мой другой файл html. На шаге 3 пользователь нажимает кнопку.

<button class="btn btn-success btn-next" ng-click="storePlatesInspection()"> 
    Submit 
    <i class="ace-icon fa icon-on-right"></i> 
</button> 

И мой контроллер выглядеть следующим образом.

angular.module('sxroApp') 
    .controller('plateInspectionCtrl', function ($scope, PlatesInspectionFactory, PlatesFactory, PlateQualityFactory, EquipmentStatusCodesFactory, PlateContainersFactory, $location) { 
    // object to hold all the data for plate inspection 
    $scope.data = []; 

    $scope.selectedPlate = {}; 

    $scope.inspectionData = { 

     equipment_status_codes_id: 1, 
     plate_container_id: 1, 
     plate_container_slot: 34, 
     plate_quality_id: 1 

    } 

    PlatesFactory.query(function (plates) { 
     $scope.plates = plates; 

    }); 

    /* $scope.getSelectedPlate = function(plate) 
      { 
       $scope.data.push({ 

        plate_id : plate.id 
      });*/ 

    // console.log($scope.selectedPlate.id) 
    //alert(item.wafer_id) 
    //PlatesInspectionFactory.update({id : $scope.plateid[0].plate_id}, $scope.inspectionData) 

    PlateQualityFactory.query(function (platequality) { 
     $scope.platequality = platequality; 

    }) 

    PlateContainersFactory.query(function (plateContainers) { 
     $scope.plateContainers = plateContainers; 

    }); 

    EquipmentStatusCodesFactory.query(function (statuscodes) { 
     $scope.statuscodes = statuscodes; 
    }); 

    $scope.storePlatesInspection = function() { 

     alert($scope.selectedPlate.plate.id); // not working 
     alert($scope.selectedPlate.plate.$id); // not working 

    } 
}); 

Я также попытался

alert($scope.selectedPlate.plate); // undefined is the result. 

Я в основном следовал тому, что этот господин говорит

Ng-model does not update controller value

ли кто-то показать мне, что я делаю неправильно?

здесь изображение формы form

Я пытаюсь использовать модель, чтобы получить выбор пользователя делает во время работы мастера.

обновление # 1: Я обновил код, указанный выше.

Answer 1

Изменить HTML для

<select id="plateId" 
     ng-model="selectedPlate.plate" 
     ng-options="plate for plate in plates"/> 
    <option value="">Select</option> 
</select> 

Посмотреть другой способ ddl bindings

Answer 2

я не уверен, почему alert($scope.selectedPlate.plate); не работает, но вы передаете значение вашего ID собственности $scope.selectedPlate.plate, так это не будет содержать «пластинчатый объект» с свойством ID в нем, это всего лишь номер (или любой другой идентификатор).

Answer 3

Я раньше не использовал ui-router, но может быть, вы указали директиву или маршрут маршрутизации вместе с свойством controllerAs. Если указан контроллерAs, то переменные, хранящиеся в $ scope в контроллере, будут доступны через значение controllerAs в представлении html.

Например, если директива была объявлена ​​как таковой:

angular.module('sxroApp') 
    .directive('plateInspectionDirective', function() { 
     return { 
      restrict: 'A', 
      templateUrl: 'plateInspection.html', 
      controller: plateInspectionCtrl, 
      controllerAs: 'plateInspection', 
      scope: { 
      } 
     }; 
    }); 

Тогда вид требует имя контроллера plateInspection для доступа к переменным на это сфера.

<div class="col-xs-12 col-sm-9"> 
<select id="plateId" ng-model="plateInspection.selectedPlate.plate" ng-options="plate.id as (plate.wafer_id + ' - ' + plate.serial_number) for plate in plateInspection.plates" /> 
<option value="">Select</option> 
</select>