Question

    <!DOCTYPE html>
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app= angular.module('myApp',[]);
app.controller('myController',function($scope){


  $scope.firstName = 'John';
  $scope.lastName = 'Smith';
  $scope.fullName = $scope.firstName + ' ' + $scope.lastName;
});
</script>
<body>

<div ng-app="myApp" ng-controller="myController">



  FirstName <input type="text" ng-model="firstName">
  LastName <input type="text" ng-model="lastName">
 <p>Full name is {{fullName}}</p>

</div>

</body>
</html>

结果是：

全名是John Smith

现在，在chrome浏览器上，我在FirstName文本框中键入Carl，我预计结果会更改为

全名是Carl Smith。

然而，它并没有改变。

我哪里错了？

Answer 1

因为$scope.fullname被评估一次，所以在创建控制器时。您可以对特定变量使用$watch，或者使用函数来构造全名，如

$scope.getFullname = function() { return $scope.firstName + ' ' + $scope.lastName; };

然后使用<p>Full name is {{ getFullname() }}</p>调用它。

最简单的方法是直接在模板中使用变量，例如

<p>Full name is {{ firstName }} {{ lastName }}.</p>

更改文本框内容时为什么不更改全名

1 个答案: