javascript - 如何在网络爬虫中以编程方式设置 Angular JS 选择值？

Question

问题是我没有代码库，我只想要一个快速函数，可以在大约 150 个下拉选择字段中选择我的预定义值。看来简单的赋值不起作用:

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

看来这种方式 Angular 变化检测没有被触发。视觉上所有字段都已更新。

Answer 1

创建一个新的dom 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>