Как программно установить значение выбора Angular JS в веб-сканере?

Question

Дело в том, что у меня нет кодовой базы, я просто хочу быструю функцию, которая выбирает мои предопределенные значения в ~ 150 раскрывающихся полях выбора.Кажется, что простое присвоение значения не работает:

document.getElementById('myId').value = 'myValue';

Кажется, что таким образом обнаружение углового изменения не запускается.Визуально все поля обновляются.

Answer 1

Создайте новый дом Event() и используйте dispatchEvent() для запуска его на каждом элементе, для которого вы устанавливаете значение.

Демо:

/// Outside angular app
const newVals= [
  {id:'sel1', val :'1'},
  {id:'sel2', val :'2'},
];

const setValue = ({id, val})=>{
    const el = document.getElementById(id);
    el.value = val;
    console.log('Triggering change on id =', id)
    el.dispatchEvent(new Event('change'))
}

// delay to let angular render
setTimeout(() => {
  newVals.forEach(setValue)
}, 500)

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl as $ctrl">

  Sel1 :
  <select id="sel1" ng-model="$ctrl.sel1" ng-change="$ctrl.logChange($ctrl.sel1)">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  Sel2 :
  <select id="sel2" ng-model="$ctrl.sel2" ng-change="$ctrl.logChange($ctrl.sel2)">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</div>

<script>
  // Angular App
  angular.module('myApp', []).controller('MainCtrl', function() {
    this.logChange = (val) => {
      console.log('Angular change event triggered, new value =', val)
    }
  });
</script>