ng-model在控制器中未定义

Question

the ng-model I have in html has a dot in it. let's take a look

step1.html file

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

It's simply a form-wizard using ui-router.

This is my other html file. In step 3 the user pushes the button.

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

And my controller look like this.

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

    }
});

I also tried

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

I basically followed what this gentleman was saying

Ng-model does not update controller value

Would someone show me what I am doing wrong?

here is an image of the form form

I am trying to use the model to get the selection the user does during the wizard process.

update #1 : I have updated the code above.

Answer 1

Change your html to

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

See different way of ddl bindings

Answer 2

I'm not sure why alert($scope.selectedPlate.plate); is not working, but you are passing the value of your ID property to $scope.selectedPlate.plate , so it won't hold a "plate object" with an ID property in it, it's just a number (or whatever ID is).

Answer 3

I haven't used ui-router before but it may be that you have specified a directive or a routing path along with the controllerAs property. If controllerAs is specified then the variables stored on $scope in the controller would be accessed via the controllerAs value in the view html.

For example, if the directive was declared as such:

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

Then the view would require the controller name plateInspection to access the variables on it's scope.

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