angularJS 基础回顾

数据“I’m string”123{A:"I’m",B:"Dictory"}{"I","am","array"}

基本数据使用 ng-init,ng-bind 关联。

<div ng-init="firstName=’Json’"><p><span ng-bind="firstName"></span></p></div>表达式

可以写在文本区域的内容,表达方式为:{{expression}}它其实定价于ng-bind。

<p>My express:{{"check Now~"+firstName}}</p>指令ng-app 指令定义了 AngularJS 应用程序的根元素。ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。

<div ng-app="" ng-init="names=[{name:’Jani’,country:’Norway’},{name:’Hege’,country:’Sweden’},{name:’Kai’,country:’Denmark’}]"><p>循环对象:</p><ul> <li ng-repeat="x in names">{{ x.name + ‘, ‘ + x.country }} </li></ul></div>

控制器

注意 脚本加载要放在使用前 例如在head中:

<head><meta charset="UTF-8"><title></title><script type="text/javascript" src="bower_components/angular/angular.min.js"></script><script type="text/javascript">var myModel = angular.module("myModel",[]);myModel.controller("myController",function($scope) {$scope.persion = {firstName:"Dan",lastName:"Jao"};});</script></head>

使用控制器要先声明一个对应的module。如上面的代码,使用angular.module(‘appName’,[‘dependcyModuleNmae’])来实现,,并调用controller方法添加对应的controller。使用时直接使用对应的$scope即可

<div ng-app="myModel" ng-controller="myController">FirstName:<input type="text" ng-model="persion.firstName"><br>LastName:<input type="text" ng-model="persion.lastName"><br>Whole: {{persion.firstName+" "+persion.lastName}}</div>

一个页面控制器只能加载一个ng-app,它相当于main()。

过滤器

使用管道符可开启过滤功能

例如:

{{ (x.name |uppercase)+","+x.others }}<p>总价 = {{ (quantity * price) | currency }}</p><li ng-repeat="x in names | orderBy:’country’">事件

向上传播事件$emit(‘myEvent’),同层传播时间$broadcast(‘myEvent’) 收事件使用:

$scope.$on(‘myEvent’),function() {$scope.count++;}$scope

看了哪些风景,遇到哪些人。尽管同学说,去旅行不在于记忆,

angularJS 基础回顾

相关文章:

你感兴趣的文章:

标签云: