$scope not picking up ng-model value in select element

Question

I'm trying to add a value to a variable receiving it from ng-model.

Here is the HTML:

<div ng-form="amountForm" class="form-group" id="inputField">
    <input value="1" type="number" placeholder="1" ng-model="itemAmount" ng-maxlength="2" required>
</div>
<div ng-form="nameForm" class="form-group">
    <input value="" type="text" placeholder="Name of Item" ng-model="itemName" ng-maxlength="10" required>
</div>
<select ng-model="currentDependent">
    <option ng-repeat="item in items" value="{{item.dependentOn}}" ng-selected="currentDependent == item.dependentOn">{{item.name}}</option>
</select>

Here is the Angular ($scope.itemAmount and $scope.itemName works):

$scope.items = [];

$scope.addItem = function () {
    console.log($scope.itemAmount + ", " + $scope.itemName + ", " + $scope.currentDependent);

    $scope.items.push({
        amount: $scope.itemAmount,
        name: $scope.itemName,
        showMe: false,
        dependentOn: $scope.currentDependent
    });
};

Nothing seems to be printing out on the console:

So the only thing is not working is ng-model in the Select. The drop down list is showing the correct values. How do I get the value selected in the drop down list to print in the console?

Note: I have left out the http.post code for clarity.

try using a dictionary. i.e. item.itemname for ng-model. – Sourabh Agrawal Mar 02 '16 at 02:06 — Sourabh Agrawal, Mar 02 '16 at 02:06

score 1 · Accepted Answer · answered Mar 02 '16 at 01:12

1

You should use itemName (or other item property) to track dependency.

<select ng-model="currentDependent">
    <option ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>
</select>

answered Mar 02 '16 at 01:12

SSH

2,533
16
21

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

I had to use a dropdown menu in one of my projects recently and here is how I personally did it

http://jsfiddle.net/halirgb/Lvc0u55v/

Don't forget to open up your console to see the values!

At first, I thought its a good idea to just ng-repeat my options. But then I figured out using ng-options is more convenient when you get the hang of it.

This SO question explains it really well!

edited May 23 '17 at 11:53

Community

1
1

answered Mar 02 '16 at 01:20

realappie

4,656
2
29
38

1

Thanks, using ng-options is a better option for a drop down list. But it seems to be working well with ng-repeat. – nealous3 Mar 02 '16 at 02:31

$scope not picking up ng-model value in select element

2 Answers2