如何使用 angular.element('#id') 获取输入元素的值答案

【问题标题】：How do I get the value of an input element using angular.element('#id')如何使用 angular.element('#id') 获取输入元素的值
【发布时间】：2015-04-16 19:17:25
【问题描述】：

当我尝试使用 angular.element 获取输入元素的值时，它返回未定义。这是我的代码：

$scope.registerUser = function() {
    console.log(angular.element('#username').value); // undefined
    console.log(document.getElementById('username').value); // sampleName
};

如何使用 angular.element 获取值

【问题讨论】：

输入是否附加了模型？您应该能够通过范围引用以这种方式获取它。
我想使用 angular.element('#id') 选择器获取值。

标签： javascript jquery angularjs

【解决方案1】：

说明

你应该使用类似于 jQuery 的$.fn.val 的val 方法：

console.log(angular.element('#username').val());

您也可以使用纯 HTMLInputELement 的 value 属性：

console.log(angular.element('#username')[0].value);

...因为angular.element 实例是一个类似数组的 HTMLElements 集合，每个元素都可以通过其索引访问。

正确的方法

但是...您永远不应该在 Angular 应用程序的上下文中读取这样的输入值。相反，使用ngModel 指令并将输入值直接绑定到角度模型：

$scope.registerUser = function() {    
    console.log($scope.username);
};

你在 HTML 中的哪个位置

<input type="text" ng-model="username">

【讨论】：

但是如果你在 iframe 中并且你的 iframe 中没有 angular，你会怎么做？
@MahdiAlkhatib 任务是什么？
我有角度模式，它在里面打开一个加载 cshtml (.net) 页面的 iframe。在用户点击模型中的保存后，我应该将页面中的数据带到角度模型。
我建议您创建单独的问题，因为它太宽泛，无法在 cmets 中回答。
非常感谢。不需要jquery

【解决方案2】：

这对我有用

angular.element(document.getElementById('username')).val();

【讨论】：

【解决方案3】：

在我的 angular-7 项目中，我使用这些语句解决了。

var field = document.getElementById('elementId'); 
var currentValue= field.getAttribute('value');
field.setAttribute('value','newValue');

【讨论】：

【解决方案4】：

您可以为 AngularJS 2+ 使用以下选项。

(<HTMLInputElement>document.getElementsByName("username")[0]).value (<HTMLInputElement>document.getElementsById("username")[0]).value

【讨论】：

【解决方案5】：

与 jQuery 中的方式相同，angular.element 是一个包装器/子：

angular.element('#username').val();

【讨论】：

如果您正在使用 Angular 1，可以使用此答案

【解决方案6】：

除了以上几种方式，这些也可以使用：

angular.element('[id="username"]').val();
angular.element('[id="username"]')[0].value;

【讨论】：

【解决方案7】：

我们可以使用“ViewChild”装饰器。

import { Component, Input, ViewChild, ElementRef} from '@angular/core';
@Component({
    selector: 'demo-input',
    templateUrl: 'demo.input.component.html'
})
export class DemoInputComponent {
    @ViewChild('inputEle') myDOMEle: ElementRef;

    getInputValue(){
       let val = this.myDOMEle.nativeElement.value;
    }
    setInputValue(){
       this.myDOMEle.nativeElement.value = "testing";
    }
}

在 HTML 中（demo.input.component.html）

<input type="text" #inputEle/>

【讨论】：