AngularJS 01(表达式)
来源:互联网 发布:java工作内容 编辑:程序博客网 时间:2024/06/05 04:39
基于JavaScript的框架
单页面应用程序
CRUD(增删改查)操作
环境:
脚本(注意版本)
引入angular.js
指令:
ng-app=”“(一个页面只能有一个)
ng-init=”i=3;n=’admin’”
ng-bind=””
ng-model=””
表达式(属性值):
{{}}
*AngularJS的版本在1.2.5和1.40的版本的区别很大
1、AngularJS作用于用户自定义的某个区域
2、表达式{{expression }}
表达式内部要想写字符串常量必须加双引号,否则会被认为是变量。
而且如果表达式内部无法追加样式
作用域:
ng-app与data-ng-app=”“
相同且作用域最大
初始化应用程序数据:
ng-init
数据类型:基本数据类型、数值、字符串、对象、数组
单向绑定
*可以将数值绑定在HTML元素上
data-ng-bind
(单向绑定将数值输入到页面)
<span data-ng-bind="books[1].pName" class="label label-success"></span>
他的效果和直接写没有区别
<span class="label label-success">{{books[1].pName}}</span
双向绑定
可以将数据从页面重新写回到数据源
data-ng-model
<input data-ng-model="books[0].count" type="text" class="form-control"/>
<from class="form-inline" data-ng-init = "numA=12;numB=3"> <div class="form-group"> <input data-ng-model="numA" type="text" class="form-control" /> <input data-ng-model="numB" type="text" class="form-control" /> <label class="label label-warning">{{numA+numB}}</label> </div> </from>
循环生成元素:(相当于for循环里面的for in)
data-ng-repeat
<div data-ng-app="" data-ng-init="books=[ {pTotal:'合计',pCount:'数量',pName:'单价',price:10.99,count:5}, {pTotal:'合计',pCount:'数量',pName:'单价',price:20.99,count:15}, {pTotal:'合计',pCount:'数量',pName:'单价',price:30.99,count:5} ]"> <div class="list-group"> <div data-ng-repeat="b in books" class="list-group-item focus"> <span class="label label-success">{{b.pName}}</span>:{{b.price}}<br> <div class="row"> <div class="col-sm-2"> <span style="line-height: 35px;">{{b.pCount}}:</span> </div> <div class="col-sm-4"> <input data-ng-model="b.count" type="text" class="form-control" /> </div> </div> {{b.pTotal}}:{{b.price*b.count}} </div> </div> </div>
阅读全文
0 0
- AngularJS 01(表达式)
- AngularJS(十一)表达式
- AngularJS入门-(6)表达式
- angularjs表达式
- AngularJS表达式
- Angularjs 表达式
- AngularJS 表达式
- AngularJS表达式
- AngularJS 表达式
- AngularJS 表达式
- AngularJS 表达式
- AngularJS 表达式
- AngularJS 表达式
- AngularJS 表达式
- AngularJS 表达式
- angularjs表达式
- AngularJS学习之路(二)AngularJS的表达式
- angularJS学习之路(五)---表达式
- WebView android 内容没有全部显示
- 数据压缩实验五:JPEG解码
- HTML基础---认识标签(a,img,base)
- ASP.NET MVC CometWe消息推送(功能和SingR类似)
- 深入I/O学习记录-01java I/O工作机制
- AngularJS 01(表达式)
- SOUI界面库 第3讲-SOUI的布局系统
- Java数据结构与算法--简单排序
- 通俗理解Maven和Gradle
- springMVC上传多个文件
- 程序中动态和变量
- Swift--15内存管理
- 近五年133个java面试问题列表
- 整理的收集的Android的学习资料(大佬们的博客,学习思路,行业要求,免费资料下载地址)