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

Question

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

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

如何使用 angular.element 获取值

Answer 1

解释

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

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

或者，您可以使用纯 HTMLInputELement 的value属性：

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

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

正确的方法

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

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

在 HTML 中的位置

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

Answer 2

这对

我有用

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

除了上述方式，这些也可用于：

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

Answer 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/>