Angular.js 应用中数据模式的删除操作实现

简介: Angular.js 应用中数据模式的删除操作实现

源代码:

<html ng-app="nameApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="angular/angular.js"></script>
    <script>
      var nameApp = angular.module('nameApp', []);
      nameApp.controller('NameCtrl', function ($scope){
        $scope.names = ['Larry', 'Moe'];

        $scope.addName = function() {
          $scope.names.push($scope.enteredName);
          $scope.enteredName = '';
        };

        $scope.removeName = function(name) {
          var i = $scope.names.indexOf(name);
          $scope.names.splice(i, 1);
        };
      });
    </script>
  </head>
  <body ng-controller="NameCtrl">
    <ul>
      <li ng-repeat="name in names">{{name}}
        <a href="" ng-click="removeName(name)">remove me</a>
      </li>
    </ul>
    <form ng-submit="addName()">
      <input type="text" ng-model="enteredName">
      <input type="submit" value="add">
    </form>
  </body>
</html>

在这段 Angular 代码中,我们可以看到一个基本的 Angular 应用的构建过程,涵盖了从模块的创建到控制器的定义,以及视图的动态交互实现。下面,我将逐一解析这段代码的每一个部分和它的功能。


1. Angular 应用的初始化
<html ng-app=`nameApp`>

这行代码定义了一个 Angular 应用的根元素。ng-app 属性指定 AngularJS 模块的名称,这里是 nameApp。该模块在 <script> 标签中定义并配置。这是 AngularJS 初始化并识别整个应用应当控制的 DOM 范围的标记。


2. 创建 Angular 模块
var nameApp = angular.module(`nameApp`, []);


这行 JavaScript 代码创建了一个名为 nameApp 的 AngularJS 模块。angular.module 是一个用于创建、注册和获取 Angular 模块的方法。nameApp 是模块的名称,紧随其后的空数组 [] 表示该模块不依赖于其他模块。


3. 定义控制器
nameApp.controller(`NameCtrl`, function ($scope){
  $scope.names = ['Larry', 'Moe'];

  $scope.addName = function() {
    $scope.names.push($scope.enteredName);
    $scope.enteredName = '';
  };

  $scope.removeName = function(name) {
    var i = $scope.names.indexOf(name);
    $scope.names.splice(i, 1);
  };
});


在这个部分,我们定义了 NameCtrl 控制器。控制器是用来建立视图(HTML)与模型(JavaScript 变量)之间的数据绑定和逻辑处理的地方。


  • $scope.names 初始化为一个包含两个名字的数组。
  • $scope.addName 是一个函数,用于将输入框中的名字添加到列表中,并清空输入框。
  • $scope.removeName 是一个函数,用于从列表中移除一个特定的名字。


4. 数据绑定和视图更新
<body ng-controller=`NameCtrl`>


ng-controller 指令将 NameCtrl 控制器与 <body> 标签关联起来,这意味着在这个 <body> 内部的所有元素都可以访问到 NameCtrl 控制器中的数据和方法。

<ul>
  <li ng-repeat=`name in names`>{{name}}
    <a href=`` ng-click=`removeName(name)`>remove me</a>
  </li>
</ul>


  • ng-repeat 指令在 <li> 标签上创建了一个循环,遍历 $scope.names 数组中的每一个元素。对于数组中的每个元素,都将生成一个 <li> 元素。
  • {{name}} 是 AngularJS 的插值表达式,用于数据绑定,将 JavaScript 变量显示在 HTML 视图中。


  • ng-click 指令添加了一个点击事件监听器,当点击 “remove me” 链接时,会调用 $scope.removeName(name) 函数。
<form ng-submit=`addName()`>
  <input type="text" ng-model=`enteredName`>
  <input type="submit" value="add">
</form>
  • <form> 标签上的 ng-submit 指令处理表单提交事件,触发 addName() 函数。
  • ng-model 指令在 <input> 元素上创建了一个双向数据绑定,将输入框的值绑定到 $scope.enteredName


5. 结论

通过这段代码,我们可以看到 AngularJS 如何通过模块化、控制器和视图指令来创建动态 Web 应用。用户可以通过输入框添加新名字到列表,并可以从列表中删除名字。这展示了 AngularJS 强大的数据绑定和 MVC 架构的应用,使得开发复杂的单页应用(SPA)变得更加简单和高效。

相关文章
|
6天前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
12 0
|
1天前
|
前端开发 JavaScript 测试技术
使用Angular构建高效单页应用的实践指南
【5月更文挑战第21天】本文是使用Angular构建高效单页应用的实践指南,涵盖了Angular框架简介、SPA构建步骤和最佳实践。首先,Angular是基于TypeScript的前端框架,提供声明式模板、组件化和路由管理等功能。构建SPA包括环境搭建、创建组件、编写路由、数据绑定和交互,以及构建和部署。实践中,应遵循Angular风格指南,使用Angular Material UI库,实现服务端渲染,并进行性能优化和测试,以提升应用性能和用户体验。
|
6天前
|
前端开发 JavaScript 算法
JavaScript 中实现常见数据结构:栈、队列与树
JavaScript 中实现常见数据结构:栈、队列与树
|
6天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
6天前
|
设计模式 JavaScript 前端开发
JS中发布/订阅模式的简单应用
JS中发布/订阅模式的简单应用
|
6天前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
31 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
7天前
|
资源调度 JavaScript 编译器
显式指定 npm 作为创建 Angular 应用时的包管理器
显式指定 npm 作为创建 Angular 应用时的包管理器
15 1
|
7天前
|
JavaScript 前端开发
关于 Angular.js 应用里的 $scope.$apply()
关于 Angular.js 应用里的 $scope.$apply()
30 8
|
7天前
|
JavaScript 前端开发
Angular.js 应用里如何发送 HTTP 请求
Angular.js 应用里如何发送 HTTP 请求
21 3
|
7天前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
8 0