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

Question

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

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

如何使用angular.element获取值

- Seshu Vuggina

---

输入中是否附加了模型？您应该能够通过作用域引用以这种方式抓取它。 - Christopher Marshall

我想使用angular.element('#id')选择器获取值。 - Seshu Vuggina

Answer 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指令并直接将输入值绑定到Angular模型：

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

在HTML中，您有

。

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

- dfsq

---

但是如果你在iframe中，而且该iframe中没有angular，你会怎么做？ - Mahdi Alkhatib

@MahdiAlkhatib 任务是什么？ - dfsq

我有一个Angular模态框，其中包含一个iframe，该iframe加载cshtml（.net）页面。用户在模态框中单击保存后，我应该将页面上的数据带回Angular模态框。 - Mahdi Alkhatib

我建议您创建一个单独的问题，因为在评论中回答它太广泛了。 - dfsq

非常感谢。不需要使用jQuery。 - Pradeepta

Answer 2

这对我很有效

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

- Tunde Pizzle

Answer 3

在我的Angular 7项目中，我通过使用以下语句解决了这个问题。

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

- ashiqs

Answer 4

您可以使用以下选项来编写AngularJS 2+代码。

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

- Pankaj Shinde

Answer 5

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

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

- Matthew Jaspers

---

如果您正在使用Angular 1，可以使用此答案。 - Pankaj Shinde

Answer 6

我们可以使用“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/>

- Muthulakshmi M

Answer 7

除了上述的方法之外，还可以使用以下方式：

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

- gaganKapula