如何在 Angular.js 中设置元素的值答案

【问题标题】：How do I set the value of element in Angular.js如何在 Angular.js 中设置元素的值
【发布时间】：2014-09-24 15:21:11
【问题描述】：

为什么我不能在 Angular.js 中这样做：

document.getElementById('divid').value = 'Change Text to This';

什么是“正确”（Angular）的做法？

【问题讨论】：

这应该是一个很好的起点：docs.angularjs.org/api/ng/directive/ngBind
check this out
campus.codeschool.com/courses/shaping-up-with-angular-js

标签： javascript angularjs frontend

【解决方案1】：

您必须将控制器绑定到您的标记并初始化您的 Angular 应用程序。

<div ng-app="myApp">
    <div id="divid" ng-controller="valueController">{{value}}</div>
</div>

然后你可以简单地在你的控制器中定义一个范围变量

myApp.controller("valueController", function($scope) {
    $scope.value = "Hi!";
});

认为最好在页面的 HTML 标签中使用 ng-app 指令

jsFiddle

【讨论】：

【解决方案2】：

在 Angular 中，您使用 ng-model 指令在模型（即 JS 变量）和视图（即 <div>）之间创建双向数据绑定。基本上，这意味着无论何时您更改视图中的数据（例如，通过输入），更改都会反映在您的 JS 变量中。见下文：

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”作为初始值。对输入的任何进一步更改都将覆盖此变量的值。

还要注意{{myVariable}} 将变量数据注入到您的 div 中。当您更改输入中的值时，div 文本也将更改。

【讨论】：