AngularJS学习(二)——表达式,ng-bind,ng-app,ng-init,ng-repeat,ng-model
来源:互联网 发布:免费点播软件 编辑:程序博客网 时间:2024/04/30 08:16
AngularJS的绑定:
ng-bind可用于绑定变量, {{ 表达式}} 内放置变量时,作用与ng-bind相同。如下例:
<!doctype html><html><head> <script src="bower_components/angular/angular.js"></script></head><body ng-app="myapp"><div ng-controller="HelloController" > <h2>欢迎来到 <span style="font-family: Arial, Helvetica, sans-serif;">HBR </span><span style="font-family: Arial, Helvetica, sans-serif;">{{helloTo.title}} 的世界!</h2></span></div><p>输入您的名字: <input type="text" ng-model="name"></p><p>Hello <span ng-bind="name"></span>!</p><script> angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; });</script></body></html>
实际上,ng-bind与下列HTML代码的效果相同
<p>Enter your Name: <input type="text" ng-model="name"></p><p>Hello {{name}}!</p>
但是,{{ }}还可以用于求表达式的值,比如{{ 5+5}},HTML页面会显示结果10。
ng-app —— 启动angular应用
ng-init —— 初始化应用数据变量
ng-model —— 定义模型
ng-repeat —— 重复HTML元素,与循环类似
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Angular JS的四个Directives</title> <script src="bower_components/angular/angular.js"></script></head><body><h1>样例</h1><div ng-app="" ng-init="fruits=[{name:'苹果', location:'北方'}, {name:'橘子',location:'南方'}, {name:'桃子', location:'全国'}]"> <p>水果产地列表:</p> <ol> <li ng-repeat="fruit in fruits"> {{ '水果: ' + fruit.name + ', 产地: ' + fruit.location }} </li> </ol></div></body></html>
0 0
- AngularJS学习(二)——表达式,ng-bind,ng-app,ng-init,ng-repeat,ng-model
- AngularJS中ng-app、ng-model、ng-bind、ng-init、ng-repeat、自定义指令
- ng-init ng-bind
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-repeat下使用ng-model
- AngularJS ng-if ng-repeat下使用ng-model
- ng-model,ng-value,ng-bind,{{}}----angularJS数据绑定
- AngularJs-ng-app -ng-model-ng-bind指令讲解和使用
- (四上)Angular指令,ng-bind指令,ng-init 指令,ng-click指令,ng-repeat 指令
- AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定(二)
- AngularJS学习笔记ng-repeat
- angularjs 表达式与ng-bind
- 解决ext textarea下拉框自动下拉
- ubuntu下的NDK配置
- CCProgressTimer进度条比LoadingBar靠谱
- 详解数据中心交换机的关键参数
- nginx防盗链
- AngularJS学习(二)——表达式,ng-bind,ng-app,ng-init,ng-repeat,ng-model
- @TargetApi and @SuppressLint
- hexo相关问题
- 【c语言】char无符号超范围的结果
- linux 安装unzip zip
- Spark MLlib SVM算法
- apache 集成多个tomcat的方法
- 《围城》读后感
- Linux 原始套接字发送接收示例