javascript - AngularJS 中的基本功能
问题描述
我正在尝试使用AngularJS编写一个简单的“Hello World”应用程序。我希望该函数greeting()
实时打印插入文本输入中的名称,但我只是{{greeting()}}
在输出中得到。怎么了?
<!doctype html>
<body ng-app="myApp">
<div ng-controller="userController">
<p>Name: <input type="text" ng-model="user.name"></p>
<p>Surname: <input type="text" ng-model="user.surname"></p>
<p>{{greeting()}}</p>
</div>
<script type="text/javascript">
angular.module("myApp", [])
.controller("userController",
function ($scope) {
$scope.user = {name: "Mario", surname: "Rossi"};
$scope.greeting = function() {
return "Hello " +
$scope.user.name + " " +
$scope.user.surname + "!"
};
});
</script>
</body>
</html>
这是一个示例:我想查看Hello John Smith!
而不是{{greeting()}}
.
解决方案
您忘记包含 AngularJS JavaScript。
否则它工作正常:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="userController">
<p>Name: <input type="text" ng-model="user.name"></p>
<p>Surname: <input type="text" ng-model="user.surname"></p>
<p>{{greeting()}}</p>
</div>
<script type="text/javascript">
angular.module("myApp", [])
.controller("userController",
function($scope) {
$scope.user = {
name: "Mario",
surname: "Rossi"
};
$scope.greeting = function() {
return "Hello " +
$scope.user.name + " " +
$scope.user.surname + "!"
};
});
</script>
</body>
推荐阅读
- reactjs - 将 react 集成到现有的 html 管理面板中
- c# - 统一刚体
- php - woocommerce 变量产品以百分比和价格显示 NaN 0
- firebase - React-native Firebase Firestore - NSException raise:format:arguments
- angular - Angular - 将功能模块拆分为不同的文件
- jackson-databind - 杰克逊对象映射器如何将对象序列化为具有嵌套对象的字符串?
- firebase - Firebase-Admin 验证 ID 令牌时出错
- c# - .net 中用于 SOAP 请求的异步 Web 方法
- oracle - 根据表中的现有值插入行号
- python - python将对象附加到列表