<div ng-app = "" ng-controller = "studentController">
...
</div>
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
studentController 被定义为一个 JavaScript 对象,以 $scope 作为参数。
$scope 是指使用 studentController 对象的应用程序。
$scope.student 是 studentController 对象的一个属性。
firstName 和 lastName 是 $scope.student 对象的两个属性。我们将默认值传递给他们。
属性 fullName 是 $scope.student 对象的函数,返回组合名称。
在 fullName 函数中,我们获取学生对象,然后返回组合名称。
注意,我们还可以在单独的 JS 文件中定义控制器对象,并在 HTML 页面中引用该文件。
Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
我们将 student.firstName 和 student.lastname 绑定到两个输入框。
我们将 student.fullName() 绑定到 HTML。
现在,只要您在名字和姓氏输入框中输入任何内容,都可以看到全名自动更新。
<html>
<head>
<title>Angular JS Controller</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
Enter first name: <input type = "text" ng-model = "student.firstName"><br>
<br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>