初学者AngularJS代码无法按预期工作[重复]

Posted 2023-03-05

【中文标题】初学者AngularJS代码无法按预期工作[重复]

【英文标题】：Beginners AngularJS code not working as expected [duplicate]

【发布时间】：2013-06-23 07:24:30

【问题描述】：

我是 AngularJS 的新手，只是在玩弄这些东西。这是我的 html：

<div ng-app ng-controller="nameController">
    <input type="text"  value="Jack" ng-model="fname" />
    <input type="text" value="Sparrow" ng-model="lname" />
    getFullName()
</div>

<input type="text" value="Hello" />

这是控制器代码：

function nameController($scope) 
    $scope.getFullName = function () 
        return $scope.fname + " " + $scope.lname;
    ;

我已经使用value 属性设置了输入文本字段的值。所以我希望控制器函数getFullName 读取这些值并在页面加载时返回全名。但我得到的是：

undefined undefined

输入文本框为空。为什么会这样？

【参考方案1】：

如果您想要这些输入的默认值，请使用模型并将它们设置为控制器中 $scope 的属性：

function nameController($scope) 
    $scope.fname = "Jack";
    $scope.lname = "Sparrow";
    $scope.getFullName = function () 
        return $scope.fname + " " + $scope.lname;
    ;

然后您可以从标记中删除value 属性。这使数据与视图很好地分离。这是working example。

或者，您可以使用ngInit 指令：

<div ng-app ng-controller="nameController" ng-init="fname = 'Jack'; lname = 'Sparrow'">
    <input type="text" ng-model="fname" />
    <input type="text" ng-model="lname" />
    getFullName()
</div>

【讨论】：

ok dat 工作....但只是想知道为什么它不从页面加载时输入元素的 value attr 获取数据

@iBlue - 因为它就是这样工作的。数据属于模型，而不是视图。