AngularJS1.X学习笔记3-内置模板指令

最新推荐文章于 2024-05-25 13:46:03 发布
最新推荐文章于 2024-05-25 13:46:03 发布
阅读量133 收藏
点赞数
分类专栏： 前端 文章标签： javascript angularjs angularjs1.x学习笔记
原文链接：https://www.mk2048.com/blog/blog.php?id=h1ij1b0abhaa&title=AngularJS1.X%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B03-%E5%86%85%E7%BD%AE%E6%A8%A1%E6%9D%BF%E6%8C%87%E4%BB%A4
版权

　　前面学习了数据绑定指令，现在开始学习内置模板指令。看起来有点多，目测比较好理解。OK！开始！

一、ng-repeat

　　1、基本用法

　　

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding1</title>
</head>
<body>
    <div ng-controller='dataCtrl'>
        <table width="80%">
            <tr><td>事项</td><td>完成否</td></tr>
            <tr ng-repeat="item in todos"><td>{{item.action}}</td><td>{{item.complete}}</td></tr>
        </table>
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.todos = [
            {action:"学习1",complete:false},
            {action:"学习2",complete:true},
            {action:"学习3",complete:false},
            {action:"学习4",complete:false},
            {action:"学习5",complete:false},
            {action:"学习6",complete:false},
            ];
        })
    </script>
</body>
</html>

　　2、操作键值

　　

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat2</title>
</head>
<body>
    <div ng-controller='dataCtrl'>
        <ul>
            <li ng-repeat="item in todos">
                <p ng-repeat="(key,value) in item">{{key}}={{value}}</p>
            </li>
        </ul>
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.todos = [
            {action:"学习1",complete:false},
            {action:"学习2",complete:true},
            {action:"学习3",complete:false},
            {action:"学习4",complete:false},
            {action:"学习5",complete:false},
            {action:"学习6",complete:false},
            ];
        })
    </script>
</body>
</html>

 

 

　　3、内置变量的使用

　　

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat3</title>
</head>
<body>
    <div ng-controller='dataCtrl'>
        <table width="80%">
            <tr>
                <td>序号</td>
                <td>事项</td>
                <td>完成否</td>
            </tr>
            <tr ng-repeat="item in todos">
                    <td>{{$index 1}}</td>
                <td>{{item.action}}</td>
                <td>{{item.complete}}</td>
            </tr>
        </table>
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.todos = [
            {action:"学习1",complete:false},
            {action:"学习2",complete:true},
            {action:"学习3",complete:false},
            {action:"学习4",complete:false},
            {action:"学习5",complete:false},
            {action:"学习6",complete:false},
            ];
        })
    </script>
</body>
</html>

 

　　ng-repeat 内置变量一览表

变量　　意义
$index返回当前属性或对象的位置（0开始）
$first当前对象为集合的第一个返回true
$middle当前对象不是第一个也不是最后一个返回true
$last当前对象为集合的最后一个返回true
$even偶数编号为true
$odd奇数编号为true

 

 

 

 

 

 

 

 

 　　4、重复生成多个顶层元素

　　

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat4</title>
</head>
<body>
    <div ng-controller='dataCtrl'>
        <table width="80%">
            <tr>
                <td>序号</td>
                <td>事项</td>
                <td>完成否</td>
            </tr>
            <tr ng-repeat-start="item in todos">
                <td>第{{$index 1}}项</td>
            </tr>
            <tr>
                <td>
                    事项是：{{item.action}}
                </td>
            </tr>
            <tr ng-repeat-end>
                <td>
                    {{$index 1}} {{item.complete?"已经":"没有"}} 完成
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.todos = [
            {action:"学习1",complete:false},
            {action:"学习2",complete:true},
            {action:"学习3",complete:false},
            {action:"学习4",complete:false},
            {action:"学习5",complete:false},
            {action:"学习6",complete:false},
            ];
        })
    </script>
</body>
</html>

 

 　　一个项要生成几行，这个时候就需要用这种重复生成顶层元素的方法。

二、ng-include

　　自由男人说ng-include指令是从服务器获取一段html代码，编译并处理其中包含的任何指令，并添加到DOM中去。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>databinding1</title>
</head>
<body>
    <div ng-controller='dataCtrl'>
        <ng-include src="'table.html'"></ng-include>
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.todos = [
            {action:"学习1",complete:false},
            {action:"学习2",complete:true},
            {action:"学习3",complete:false},
            {action:"学习4",complete:false},
            {action:"学习5",complete:false},
            {action:"学习6",complete:false},
            ];
        })
    </script>
</body>
</html>

 

 　　我将表格单独做了一个叫做table.html的文件，然后用ng-include引进来了。但是第一次没有成功，检查发现比书上少了两个单引号，这是个坑。自由男人又说了，src属性是被当作js表达式计算的，要静态定义一个文件就得用单引号。

　　这个指令还有两个属性：onload用于指定在内容被加载时计算的表达式;autoscroll指定内容加载是是否应该滚动到这个区域。另外可以将ng-include用作属性。类似这个样子：

<div ng-include="path" onload="xxx"></div>

 

三、ng-switch

　　

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>ng-switch</title>
</head>
<body>
    <div ng-controller='dataCtrl'>
        <input type="text" name="t" ng-model="data">
        <div ng-switch on="data">
            <div ng-switch-when="1">
                我是data为1的视图。
            </div>
            <div ng-switch-when="2">
                我是data为2的视图。
            </div>
            <div ng-switch-when="3">
                我是data为3的视图。
            </div>
            <div ng-switch-default>
                我是data为默认情况下的视图。
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('dataCtrl',function($scope){
            $scope.data = "1";
        })
    </script>
</body>
</html>

 

 　　ng-switch on="要检测的数据"

　　ng-switch-when="要检查的条件"

　　ng-switch-default 没有满足的

四、其他内置模板指令

指令　怎么用　　干嘛的
ng-ifA从DOm中删除或者添加元素
ng-showAC显示隐藏元素
ng-hideAC显示隐藏元素
ng-styleAC设置CSS属性
ng-classAC为元素指定一个类
ng-class-evenAC为偶数元素设置类
ng-class-oddAC为奇数元素设置样式

 

 

 

 

 

 

 

 

 

　　这里不做实验了，做个表用的时候方便查。

　　预告：接下来学习事件指令！好激动，又学完一个点。加油加油！先活动一下！

我爱丁丁猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Angular1.X框架模板
11-14
Angular1.X开发模板（包含Jquery插件以及字体文件）适合后台管理平台
AngularJS1.X学习笔记8-自定义指令（上）
weixin_30337157的博客
04-08 100
　　AngulaJS的指令是一种非常强大的特性，一个ng-repeat就能让我们非常方便的展示一个数据列表，指令相当于是一个组件，为我们将一些东西封装起来了，提供了复用的可能性。个人认为自定义指令还是比较复杂的，下面开始攻关。 一、三个重要参数　 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head&g...
angular1.x 组件开发
weixin_34354173的博客
05-30 1089
搜索框组件开发： 1.注册组件 app.js angular.module("myApp",[]) .component("nameSearch",{ templateUrl:"../components/nameSearch.html", template: "", controller:function ($scope,$rootScope) { // 搜索框内容 ...
angular速成1——组件以及组件里面的模板
笮锟的博客
05-31 283
一、创建 angualr 组件 创建组件 ng g component components/header 使用组件 <app-header></app-header> 二、Angular 绑定数据 数据文本绑定 {{}} <h1>{{title}} </h1> <div>1+1={{1+1}} </div> 绑定 html this.h="<h2>这是一个 h2 用[innerHTML]来解析<
AngularJS1.X学习笔记2-数据绑定详解
12-04
上一篇从整体上认识了Angular，从现在开始更加深入的学习Angular的特性。本次学习的是数据绑定。应该所有的MVC框架都会用到数据绑定，比如我所知道的ThinkPHP、struts等，只有实现了数据绑定才能将模型层和视图层...
AngularJS学习笔记之ng-options指令
12-29
1.基本下拉效果(lable for value in array) 　其中select标签中的ng-model属性必须有，其值为选中的对象或属性值。 <div ng-controller=ngselect> <p>usage:label for value in array 选项，{{selected}} <...
VEE 9.3 Help.chm 学习笔记1-How do I do
02-18
VEE 9.3 Help.chm 学习笔记1-How do I do
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 219
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1078
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
vue 使用 export default
global_coding的博客
05-24 299
vue 使用 export default
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 924
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
React18+TypeScript搭建通用中后台项目实战04 封装常用工具函数
最新发布
Python私教
05-25 239
此时，访问 http://localhost:5173/ 进行测试。此时，访问 http://localhost:5173/ 进行测试。此时，访问 http://localhost:5173/ 进行测试。修改 src/api/request.ts。修改 src/page/Index.tsx。修改 src/page/Index.tsx。修改 src/page/Index.tsx。
js知识点汇总之let const 和 var的区别
fyw1789的博客
05-23 1457
声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。其实上面不存在变量提升的例子中，其实也是暂时性死区，因为它有暂时性死区的概念，所以它压根就不存在变量提升了。实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。中的作用域有：全局作用域、函数作用域，命令声明变量之前，该变量都是不可用的。，导致绑定这个块级作用域，
Vue从入门到实战Day07
ltt159264的博客
05-21 922
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
TS中的InstanceType函数和Typeof 操作符
05-23 169
【vue中的instanceType用法】父组件用ref获取子组件时，通过 instanceType获取子组件的类型。此外，typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。尽管ES6引入了更清晰的类语法，但从类型检查的角度看，类仍然被视为函数。函数：该函数返回（构造） 由某个构造函数构造出来的实例类型组成的类型。操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。获取由某个构造函数构造出来的实例类型组成的类型。操作符可以用来获取一个变量或对象的类型。
使用elementUI的form表单校验时，错误提示位置异常解决方法
xuelong的博客
05-22 204
最近在做项目时遇到一个问题，使用elementUI的Descriptions 描述列表与form表单校验时，遇到校验信息显示的位置不对，效果如图
前端开发攻略---用Vue实现无限滚动的几种方法
nibabaoo的博客
05-22 1107
用vue实现无限滚动
spark2.x学习笔记：spark sql的sql
03-16
Spark SQL的SQL语法与标准SQL语法非常相似，因此对于熟悉SQL的开发人员来说，学习Spark SQL非常容易。Spark SQL还支持使用用户自定义函数（UDF）来扩展其功能。总之，Spark SQL是一个非常强大的工具，可以帮助我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值