Reputation: 7542
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
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