ng-model wont update when <select> is changed with JavaScript

user_13015926 0
Viewed 215

I am trying to make a custom dropdown box using javascript and anglersJS to bind the data to the select. Not all the code is here, but the way that it should work is that the user clicks a div(which acts as the option select), that is created with code that isn't posted, then the div calls a function to change the select tags selected index and value,(does not directly change the model in the $scope). The data-ng-model should be updating, however, the model does not update its value.

I have tried calling $apply() and $digest() and neither work. The select tag is showing that the index and value have change but model is not picking it up.

Note: data-bp-placeholder is used by my Javascript to create the custom dropdown list.

HTML

<div class="bp-select" data-bp-placeholder="Choose">
    <select data-ng-model="count.amount">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
</div>

JavaScript

selectElement.selectedIndex = i;
selectElement.value = optionList[i].value;

'selectElement' is the select tag, 'i' is the index, and 'optionsList' is just the list of the options tags' values.

How can i get ng-model to update its value after the select tag's value is changed.

angularjs html javascript
2 Answers

The ng-model direcitve only updates the scope model when the user selects a value. It does not update the scope model when JavaScript modifies the value property of the <select> element.

<select data-ng-model="count.amount">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

To update the scope model from JavaScript:

$scope.count.amount = "5";

Be sure to use strings and not numbers.

user_55352450

You seem to be manipulating the DOM directly which you should avoid as AngularJs may not recognize it. To do the correct AngularJs way, you need to change two places:

  • Assign the user input to the model not to the DOM element, as already answered

  • Your data-bp-placeholder handler seems to dynamically add option values to the selectElement by direct DOM manipulation (by using appendChild I suppose). You should maybe try this instead:

$scope.count.amounts = Array.from(Array(10).keys()); // Create scope array variable of whatever your list is

Then your HTML may look like this, possibly without needing data-bp-placeholder:

<select data-ng-model="count.amount" data-ng-options="amount for amount in count.amounts">
</select>
user_129834080
Related