angulr1 常用指令 分类demo

最新推荐文章于 2019-07-22 16:22:49 发布
最新推荐文章于 2019-07-22 16:22:49 发布
阅读量175 收藏
点赞数
分类专栏： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thedarkclouds/article/details/82357106
版权 
表达式

<html>
<head>
<title>入门小 Demo-1</title>
<script src="angular.min.js"></script>
</head>

<body ng-app>
{{100+100}}
</body>

</html>

输出结果   200

表达式的写法是{{表达式 }} 表达式可以是变量或是运算式
ng-app 指令 作用是告诉子元素一下的指令是归 angularJs 的,angularJs 会识别的
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

 

 

双向绑定

<html>
<head>
<title>入门小 Demo-1 双向绑定</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>

请输入你的姓名： <input ng-model="myname">

<br>

{{myname}},你好

</body>
</html>

ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以
实时地输出变量

初始化指令
我们如果希望有些变量具有初始值，可以使用 ng-init 指令来对变量初始化

<html>
<head>
<title>入门小 Demo-3 初始化</title>
<script src="angular.min.js"></script>
</head>

<body ng-app ng-init="myname='陈大海'">

请输入你的姓名： <input ng-model="myname">

<br>

{{myname}},你好

</body>
</html>
1.3.4 控制器

<html>
<head>
<title>入门小 Demo-3 初始化</title>
<script src="angular.min.js"></script>
<script>

var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块,[]用来引入其他模块
//$scope 就是控制层与试图层交换数据的桥梁
//创建控制器   两个参数 ：控制器名称   函数
app.controller('myController',function($scope){
$scope.add=function(){
return parseInt($scope.x)+parseInt($scope.y);
}
});

</script>

</head>
 //指定控制器
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" >
y:<input ng-model="y" >
//调用函数显示结果
运算结果： {{add()}}

</body>
</html>

ng-controller 用于指定所使用的控制器。
理解 $scope：
$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上
下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会
立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.


 

<html>
<head>
<title>入门小 Demo-5 事件指令</title>
<script src="angular.min.js"></script>
<script>

var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
//定义控制器
app.controller('myController',function($scope){
$scope.add=function(){
$scope.z= parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" >
y:<input ng-model="y" >
<button ng-click="add()">运算</button>
结果： {{z}}
</body>
</html>

ng-click 是最常用的单击事件指令，再点击时触发控制器的某个方法
循环数组

<html>
<head>
<title>入门小 Demo-6 循环数据</title>
<script src="angular.min.js"></script>

<script>
var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
//定义控制器
app.controller('myController',function($scope){
$scope.list= [100,192,203,434 ];//定义数组
});
</script>
</head>

<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>

这里的 ng-repeat 指令用于循环数组变量。
循环对象数组

<html>
<head>
<title>入门小 Demo-7 循环对象数组</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
//定义控制器
app.controller('myController',function($scope){
$scope.list= [
{name:'张三',shuxue:100,yuwen:93},
{name:'李四',shuxue:88,yuwen:87},
{name:'王五',shuxue:77,yuwen:56}
];//定义数组
});

</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
内置服务

我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http 来
实现。注意：以下代码需要在 tomcat 中运行


<html>
<head>
<title>入门小 Demo-8 内置服务</title>
<meta charset="utf-8" />
<script src="angular.min.js"></script>
<script>
var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
//定义控制器
app.controller('myController',function($scope,$http){
$scope.findAll=function(){
$http.get('data.json').success(
function(response){
$scope.list=response;
}
);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>

建立文件 data.json
[
{"name":"张三","shuxue":100,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"赵六","shuxue":67,"yuwen":86}
]

 

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular1.x自定义指令实例详解
08-31
主要介绍了Angular1.x自定义指令,结合实例形式分析了Angular1.x自定义指令的实现与使用方法,以及相关操作技巧与注意事项,需要的朋友可以参考下
angularJs1.x学习——指令（directive）之scope
where_slr的博客
07-13 1396
scope 指令的作用域 可选 ，默认是false false: 使用父作用域，指令中对属性的修改，会直接 作用到父级作用域中 true: 从父作用域继承 ，并创建一个新的作用域对象 ，指令 中可以访问 父级的作用域，修改不会影响 到父级 {}: 创建一个隔离作用域，不能访问 父级的作用域，修改也不会影响 到父级 &lt;!DOCTYPE html&gt; &lt;html lang="...
AngularJS1.x 自定义指令（directive）
张彬彬的博客
07-22 689
自定义指令（directive） 要调用自定义指令，HTML 元素上需要添加自定义指令名。 使用驼峰法来命名一个指令， myDirective, 但在使用它时需要以-分割,my-directive: <my-directive></my-directive> <script> var app = angular.module("myApp", [...
angular1.x 中重要指令介绍($eval,$parse和$compile)
weixin_34081595的博客
02-26 240
这篇文章是我两年前在博客园写的,现在移植过来,不过Angular 1.x 在国内用的人已经不多了,希望能帮助到有需要的人 在 angular 的服务中，有一些服务你不得不去了解，因为他可以说是 ng 的核心，而今天，我要介绍的就是 ng 的两个核心服务，$parse 和 $compile 。其实这两个服务讲的人已经很多了，但是 100 个...
Angular指令1
aibo110110的博客
01-13 128
Angular的指令 也就是directive，其实就是一WebComponent，以前端的眼光来看，好象很复杂，但是以后端的眼光来看，还是非常简单的。其实就是一个中等水平的类。 var myModule = angular.module(...); myModule.directive('namespaceDirectiveName', function factory(injecta...
ShellExtGuide1_demo.zip_DEMO_ShellExtGuide1_demo
最新发布
09-19
在这个“ShellExtGuide1_demo.zip_DEMO_ShellExtGuide1_demo”压缩包中，包含的是一个关于Shell扩展的示例，尽管描述中提到没有详细查看，但我们可以通过分析其内容来深入了解Shell编程的基础和一些高级概念。...
1-ClientDemo_海康demo_
10-01
【标题】"1-ClientDemo_海康demo_" 指示了这是一个关于海康威视设备网络SDK的客户端演示程序。海康威视是一家知名的安防监控设备制造商，其提供的SDK（Software Development Kit）允许开发者集成和控制海康设备，如...
angular1 demo
09-07
这个“angular1 demo”是一个示例项目，展示了AngularJS的基本用法和功能。通过下载提供的源码，我们可以深入理解AngularJS的架构和工作原理。 AngularJS的核心特性包括数据绑定、依赖注入、指令系统和模块化。在...
Unity垃圾分类2D Demo
05-23
下载完成后导入到Unity，运行Garbage场景即可
数字图像处理常用demo图片
07-11
数字图像处理常用demo图片 包含米粒(rice.png)、硬币(coins.png, eight.tif)、摄像的人(cameraman.tif)、小孩(kids.tif)、水果(pears.png)、蔬菜(onion.png、peppers.png)等等几乎所有的demo图
angulr-bootstrap-admin-web-app-with-angularjs-2.x版本
05-28
angulr-bootstrap-admin-web-app-with-angularjs 2.0版本来拉。由于最近比较忙所有没有持续更新这个版本。在此特地发一下2.0.1版本的。如果有需要我之前版本的请查看我的资源，移驾之前的资源。绝对官网下载的完整包。个人出30刀购买的。
命令模式demo
02-29
C# 命令模式demo
Angulr v2.2.1 - Bootstrap Admin Web App with AngularJS
11-17
## Release v2.2.1 ### Features: - Update angularjs to 1.5.8 - Update angular-ui-select to 0.19.4 - Fix css issue on Chrome53 - Fix vbox on small screen
微信小程序蓝牙收发指令Demo
08-08
微信小程序蓝牙模块Demo，支持特征值写入和特征值监听 微信小程序蓝牙模块Demo，支持特征值写入和特征值监听
命令模式代码demo
12-01
命令模式代码demo 命令模式代码demo 命令模式代码demo
angular1.x的directive
hanker的博客
06-28 894
转载于： http://damoqiongqiu.iteye.com/blog/1917971学习directive<body ng-app="app" ng-controller="MainCtrl"> <my-directive></my-directive> </body>如上图上面自定义标签是无效的。我们要自定义它 指令的作用：实现语义化标签 template && restri
angular1基础
kingov
06-17 2896
自定义指令directive &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body ng-app='myap
Angularjs1自定义指令
me_never的博客
06-25 538
1、3种创建自定义服务的方式。 Factory、Service、Provider dao层：就是Model层，在后台时，这一层的作用，就要是写与数据库交互数据的一层，在angularJS里就主要是写ajax的。 service层：主查写逻辑代码的，但在angularJS里也可以持久化数据（充当数据容器），以供不同的controller高用。 controller层：即控制层，在angularJS里...
Angular指令一
weixin_30779691的博客
11-23 62
Angular指令一 　　通过AngularJS模块API中的 .directive() 方法，我们可以通过传入一个字符串和一个函数来 注册一个新指令。其中字符串是这个指令的名字，指令名应该是驼峰命名风格的(除了第一个单词外其他单词首 字母大写，中间不加空格)，函数应该返回 一个对象。 指令内容： 　　restrict 四种格式：元素（E）、属性（A...
MATLAB命令大全及常用指令总结
在MATLAB中，有一些常用的指令可以帮助用户获取关于MATLAB和工作空间的一般信息，例如通过demo指令可以查看演示程序，通过help指令可以获取在线帮助，通过helpbrowser、helpdesk和helpwin指令可以打开超文本文档帮助...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值