如何在 Angular.js 应用的数据模型里增添新数据
效果：
源代码：
<html ng-app="nameApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script>window.debug = true; </script>
<script src="angular/angular.js"></script>
<script>
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function ($scope){
$scope.names = ['Larry', 'Curly', 'Moe'];
$scope.addName = function() {
$scope.names.push($scope.enteredName);
$scope.enteredName = 'Jerry';
};
});
</script>
</head>
<body ng-controller="NameCtrl">
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
<form ng-submit="addName()">
<input type="text" ng-model="enteredName">
<input type="submit" value="add">
</form>
</body>
</html>
这段代码是一个典型的 AngularJS 示例，展示了如何使用 AngularJS 构建一个简单的交云应用程序。我们将从 HTML 页面结构和 AngularJS 脚本两部分详细解析代码的功能和语法。
HTML 页面结构
整个 HTML 页面是基于 AngularJS 框架构建的。通过在 <html> 标签中添加 ng-app="nameApp" 属性，定义了这个页面属于 nameApp 模块。这是 AngularJS 初始化并识别整个应用应该如何处理的标识。
<html ng-app="nameApp">
在 <head> 部分中，除了常规的字符集和标题设置外，引入了 AngularJS 的库文件。<script src="angular/angular.js"></script> 这行代码负责加载 AngularJS 的核心库，使得 AngularJS 的各种功能可以在接下来的脚本中使用。
<script src="angular/angular.js"></script>
AngularJS 脚本解析
在 <script> 标签中，定义了 AngularJS 的主要逻辑。
var nameApp = angular.module(`nameApp`, []);
这行代码创建了一个名为 nameApp 的 AngularJS 模块。数组 [] 表示这个模块不依赖于其他模块，是一个独立模块。
接着，定义了一个控制器 NameCtrl。
nameApp.controller(`NameCtrl`, function ($scope){
控制器 NameCtrl 负责处理用户界面的逻辑。$scope 是一个对象，用于双向绑定数据和视图。它可以在 HTML 视图和 JavaScript 代码之间共享数据。
$scope.names = [`Larry`, `Curly`, `Moe`];
这里，$scope.names 初始化为一个包含三个名字的数组。这个数组会通过数据绑定显示在页面上。
$scope.addName = function() {
$scope.names.push($scope.enteredName);
$scope.enteredName = `Jerry`;
};
addName 函数用于添加一个新的名字到 $scope.names 数组中。这个名字来自于 $scope.enteredName，即用户在输入框中输入的数据。函数执行后，还将输入框中的文字设置为 Jerry。
HTML 视图与数据绑定
在 <body> 标签内，使用 ng-controller="NameCtrl" 将 NameCtrl 控制器与视图关联起来。
<body ng-controller="NameCtrl">
这允许页面上的数据与 $scope 对象中的数据进行双向绑定。
使用 ng-repeat 指令在 <ul> 列表中遍历 names 数组，并为每个元素创建一个 <li> 标签。这种方式非常适合展示数组中的元素。
<li ng-repeat="name in names">{{name}}</li>
每次迭代 ng-repeat 都会创建一个新的 <li> 元素，其中 {{name}} 是 AngularJS 的插值表达式，用于绑定数据。
下面的 <form> 标签使用了 ng-submit 指令。这表示当表单提交时，会调用 addName 函数。
<form ng-submit="addName()">
<input type="text" ng-model="enteredName"> 这行代码将输入框与 $scope.enteredName 建立了数据绑定。这意味着，输入框的值变化时，$scope.enteredName 的值也会同步更新。
总结
这个例子演示了如何使用 AngularJS 创建基本的模块、控制器、数据绑定及事件处理。通过 AngularJS 的模块化设计，可以很容易地扩展和维护代码。此外，AngularJS 的数据绑定功能使得开发者能够轻松构建动态的交互界面。这
只是 AngularJS 众多功能中的一小部分，但已足够展示其强大的前端开发能力。
- 点赞
- 收藏
- 关注作者
评论（0）