David Tunnell
David Tunnell

Reputation: 7542

Passing selected option to controller function

I have a table that has some inputs and angular models.

                            <td>
                                <select class="form-control" id="">
                                    <option ng-model="mfrNo" ng-repeat="manufacturer in manufacturers" value="mfrNo">{{manufacturer.SUPP_NAME}} [{{manufacturer.SUPP_NO}}]</option>
                                </select>
                            </td>
                            <td>
                                <input type="text" ng-model="newCon" class="form-control" name="new_contract_number" value="" maxlength="500"/>
                            </td>
                            <button type="button" class="btn btn-default" data-dismiss="modal" data-ng-click="reassignContract()">Reassign</button>

In my controller I want to retrieve the values that are selected/inputted.

    $scope.reassignContract = function () {
        console.log($scope.newCon);
        console.log($scope.mfrNo);

    };

The first model newCon passes the text input fine. But the 2nd, mfrNo outputs undefined/null.

Why is this model/object not passing? What am I doing wrong and how do I fix it?

Upvotes: 2

Views: 37

Answers (1)

zero298
zero298

Reputation: 26878

ngModel should go on the <select> not the <option>. You should also consider using ngOptions.

So:

<td>
    <!-- ngModel should go here -->
    <select ng-model="mfrNo" class="form-control" id="">
        <!-- Instead of here -->
        <option ng-repeat="manufacturer in manufacturers" value="mfrNo">{{manufacturer.SUPP_NAME}} [{{manufacturer.SUPP_NO}}]</option>
    </select>
</td>

Additionally, you are setting the value of your only <option> to "mfrNo". I don't know if that is intentional or not, but that means that the value of $scope.mfrNo will be "mfrNo". I think you mean to set it to some other value from the $scope. Use {{some_scope_var}} interpolation.

Upvotes: 3

Related Questions