时间戳

首页 > 解决方案 > 如何在控制台的 Angular 下拉菜单中设置范围值？

javascript - 如何在控制台的 Angular 下拉菜单中设置范围值？

问题描述

我想在位于开发人员工具的调试器中的 AngularJS 中设置/更改下拉菜单中的值。

我尝试了以下方法：

angular.element(
    getElementsByClassName('input-group ng-pristine ng-isolate-scope ng-empty ng-invalid ng-invalid-required ng-touched')[0]
).scope().model = 'Incorrect PO'"

但是它不起作用。通常当我调试 Angular 并且我想更改某个项目的值时 - 我将“ng-model”属性放在最后（在上面的示例中，ng-model 的属性称为“model”）。

<select name="creditReason" 
    class="input-group ng-pristine ng-isolate-scope ng-empty ng-invalid ng-invalid-required ng-touched"
    id="creditReason"
    required="required"
    ng-change="change ? change() : _.noop()" 
    ng-model="model" 
    ng-options="type.value as type.name for type in list"
    ng-disabled="(disableField || disabled)" 
    ng-required="lookupRequired" 
    ng-attr-id="{{lookupId}}" 
    model="confirmDialogCtrl.creditReasonCodeId" 
    lookup="creditReasons" 
    lookup-required="true" 
    lookup-name="creditReason" 
    lookup-id="creditReason"
    ng-attr-name="{{lookupName}}">
  <option selected="selected" value="?"></option>
  <option value="number:39001" label="Customer Request">Customer Request</option>
  <option value="number:39002" label="Discount Not Applied">Discount Not Applied</option>
  <option value="number:39003" label="Duplicate Billing">Duplicate Billing</option>
  <option value="number:39004" label="Incorrect Address">Incorrect Address</option>
  <option value="number:39005" label="Incorrect Billing Method">Incorrect Billing Method</option>
  <option value="number:39006" label="Incorrect Cost Center">Incorrect Cost Center</option>
  <option value="number:39007" label="Incorrect Customer/Season">Incorrect Customer/Season</option>
  <option value="number:39008" label="Incorrect PO">Incorrect PO</option>
  <option value="number:39009" label="Incorrect Rate">Incorrect Rate</option>
  <option value="number:39010" label="Incorrect Rental Period">Incorrect Rental Period</option>
  <option value="number:39011" label="Sales Tax">Sales Tax</option>
  <option value="number:39012" label="Other">Other</option>
</select>

您能否建议如何更改下拉菜单的值？我不太了解以下部分："ng-options" = "type.value as type.name for type in list"

编辑：有人能帮我解决这个问题吗？:(

谢谢！

标签： javascriptangularjsdebuggingdropdown

解决方案

一旦你得到$scopeusing .scope()，你需要 use$apply来设置model值。根据文档

$apply()用于从 AngularJS 框架之外执行 AngularJS 中的表达式。

使用它，您现在可以model使用以下代码从控制台更新

// Add the relevant classes to access the element.
// input-group should be sufficient if there are no other elements in the DOM with this class name.
const $scope = angular.element(document.getElementsByClassName("input-group")[0]).scope();
$scope.$apply(() => $scope.model = "number:39001")

或者如果您更喜欢在一行中执行此操作

angular.element(document.getElementsByClassName("input-group")[0]).scope().$apply(($scope) => $scope.model = "number:39001")

推荐阅读