如何在 Angular.js 中设置元素的值
为什么我不能在 Angular.js 中这样做:
Why can't I do this in Angular.js:
document.getElementById('divid').value = 'Change Text to This';
什么是正确"(Angular)的做法?
And what is the "right" (Angular) way of doing it?
推荐答案
在 Angular 中，您使用 ng-model 指令来创建模型之间的双向数据绑定(即 JS变量)和视图(即<div>).基本上，这意味着无论何时您更改视图中的数据(例如，通过输入)，更改都会反映在您的 JS 变量中.见下文:
In Angular you use the ng-model directive in order to create a two-way data binding between your model (i.e. a JS variable) and the view (i.e. the <div>). Basically, this means that whenever you change the data in the view (through an input, for instance), the change will be reflected in your JS variable. See below:
HTML:
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<div>{{myVariable}}</div>
<input type="text" ng-model="myVariable" />
</div>
</html>
JS:
/* App global module */
var myApp = angular.module('myApp');
/* Define controller to process data from your view */
myApp.controller('MyCtrl', function($scope) {
$scope.myVariable = "initialValue"; // this is the variable that corresponds to text inserted in your input
});
在这里，myVariable 将initialValue"作为初始值.对输入的任何进一步更改都将覆盖此变量的值.
Here, myVariable will have "initialValue" as an initial value. Any further changes to the input will overwrite the value of this variable.
还要注意 {{myVariable}} 将变量数据注入到您的 div 中.当您更改输入中的值时，div 文本也将更改.
Also notice that {{myVariable}} injects the variable the data into your div. When you change the value in the input, the div text will be changed as well.
相关文章