Модель ng не будет обновляться при изменении <select>на JavaScript

Question

Я пытаюсь создать пользовательский выпадающий список, используя javascript и рыболовов JS, чтобы связать данные с выбранным. Здесь не весь код, но способ, которым он должен работать, заключается в том, что пользователь нажимает на div (который действует как выбор опции), который создается с кодом, который не опубликован, затем div вызывает функцию, чтобы изменить выберите теги, выбранный индекс и значение, (напрямую не меняет модель в области $). Модель data-ng должна обновляться, однако модель не обновляет свое значение.

Я пробовал вызывать $ apply () и $ digest (), но ни одна из них не работает. Тег выбора показывает, что индекс и значение изменились, но модель его не выбирает.

Примечание: data-bp-placeholder мой Javascript использует для создания собственного выпадающего списка.

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» - это тег выбора, «i» - это индекс, а «optionsList» - это просто список значений тегов параметров.

Как мне заставить ng-модель обновить свое значение после изменения значения тега select.

Answer 1

Вы, кажется, манипулируете DOM напрямую, чего вам следует избегать, поскольку AngularJs может не распознать его. Чтобы сделать правильный AngularJs способ, вам нужно поменять два места:

• Назначить пользовательский ввод для модели, а не для элемента DOM, как уже ответили

• Кажется, ваш обработчик data-bp-placeholder динамически добавляет значения параметров в selectElement путем прямого манипулирования DOM (используя appendChild, я полагаю). Возможно, вам следует попробовать это вместо этого:

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

Тогда ваш HTML может выглядеть так, возможно, без необходимости data-bp-placeholder:

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

Answer 2

Директива ng-model обновляет модель области только тогда, когда пользователь выбирает значение. Он не обновляет модель области, когда JavaScript изменяет свойство value элемента <select>.

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

Чтобы обновить модель области с JavaScript:

$scope.count.amount = "5";

Обязательно используйте строки, а не цифры.