Angular js得到div元素问题

Question

我试图通过ng-click获取div元素值，但它会发出警告undefined。 我的HTML是

<div ng-model='myName'>this is my name</div>
<br/>
<input type="button" value="Show Name" ng-click="showName()"/>

脚本是

$scope.showName = function(){
        var nameOne = $scope.myName;
        alert(nameOne);
    }

如何解决这个问题。谢谢。

Answer 1

ngModel指令不能与plain div一起使用（除非该元素是自定义表单控件），请参阅https://docs.angularjs.org/api/ng/directive/ngModel

<div ng-init="myName = 'this is my name'">{{ myName }}</div>
<br/>
<input type="button" value="Show Name" ng-click="showName()"/>

Plunker here

修改：在ngInit之外使用ngRepeat被视为bad practice，初始化控制器中的范围变量

$scope.myName = 'this is my name';
$scope.showName = function() {
    alert($scope.myName);
}

Answer 2

<div>{{myName}}</div>
<br/>
<input type="button" value="Show Name" ng-click="showName()"/>

脚本是

$scope.showName = function(){
        var nameOne = $scope.myName;
        alert(nameOne);
    }

Answer 3

实际上应该在输入上使用ng模型。

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

这将创建$ scope.myName var并将其绑定到输入内容。

如果您在javascript中初始化myName并希望它显示在此div中，则应使用以下语法：

JS

$scope.myName = "Ben";

HTML

<div>This is my name : {{myName}}</div>

在这两种情况下，除非您在点击之前没有初始化按钮（在第二个示例中），否则您的按钮单击不会显示未定义。

希望它有所帮助。