ng-model undefined in controller

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.

Is this inside a repeater? If you select something does it work? What is `$scope.plates`? — tymeJV, Oct 16 '15 at 14:18
Where is `storePlatesInspection ()` called? Also seems to be conflict between `.$id` and `.id`. Log `$scope.selectedPlate` to console and inspect it — charlietfl, Oct 16 '15 at 14:19
Could you post your code please? Tell us what contains $scope.plates also please :) Thanks, Diane — Diane Duquesne, Oct 16 '15 at 14:20
@ tymeJV It does work if I select something, but just not sending id back to controller. And what do you exactly mean by $scope.plates? Which line? — user3641381, Oct 16 '15 at 14:21
@DianeDuquesne I have updated the code with more details and an image of the process I am trying to achieve. — user3641381, Oct 16 '15 at 14:30
Can we see the data structure of `$scope.plates` - is there even an `id` property/ — tymeJV, Oct 16 '15 at 14:32
Please see ["Should questions include “tags” in their titles?"](http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), where the consensus is "no, they should not"! — , Oct 16 '15 at 14:37
@tymeJV Its simple data coming from API. Of course it has id property. — user3641381, Oct 16 '15 at 15:36

score 0 · Answer 1 · answered Oct 16 '15 at 14:40

0

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

answered Oct 16 '15 at 14:40

Ali Adravi

21,707
9
87
85

I have tried this countless times. And I appears not to work. – user3641381 Oct 16 '15 at 15:35

score 0 · Answer 2 · answered Oct 16 '15 at 20:33

0

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

answered Oct 16 '15 at 20:33

Norbert Huurnink

1,326
10
18

score 0 · Answer 3 · answered Oct 16 '15 at 21:02

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>

ng-model undefined in controller

3 Answers3