angularjs速成学习个人理解_2表达式

表达式语法{{表达式 [|过滤器] }}:两个{{}}中可以放入表达式。通常任务默认是访问$scope下的数据模型。在表达式后面可以加入过滤器来进行结果的过滤显示。

<div class="test-div" ng-app="myApp" ng-controller="myCtrl">            <h1>时时发生变更的视图表达式{{number}}</h1> </div><!-- 通常防止页面的加载缓慢，目的是先加载html的标签。angular或其他库先加载会影响页面的速度 --><script type="text/javascript" src="static/js/angular-1.5.8.js"></script><script type="text/javascript">            // 对应ng-app声明这是一个模块，并获取模块对象    var myApp = angular.module("myApp", []);            // 对应ng-controller声明一个控制器。一个模块下可以包含多个控制器   myApp.controller("myCtrl", function($scope, $interval) {                // 创建数据模型number并赋值                $scope.number = 0;         });

表达式也可以是数据的+-*/等二元操作符。

<div class="test-div" ng-init="num1=2;num2=5"><p>积：{{num1 * num2}}</p><p>和：<span ng-bind="num1 + num2"></span></p></div>

结果是10和7.ng-init属性相当于在controller中$scope.属性一样的作用。

<div class="test-div" ng-controller="myCtl" ><p>FullName: {{firstName + " " + lastName}}</p><p>FullName: <span ng-bind="firstName + ' ' +lastName"></span></p></div>            // 对应ng-app声明这是一个模块，并获取模块对象            var myApp = angular.module("myApp", []);            // 对应ng-controller声明一个控制器。一个模块下可以包含多个控制器            myApp.controller("myCtl", function($scope) {                $scope.firstName = "ma";                $scope.lastName = "zheng";            });

 

结果是名字的拼接。同时也支持负责数据类型。

<div class="test-div" ng-init="user={userName:'Neo',age:32}"><p>User: {{user.userName}}</p><p>Age: <span ng-bind="user.age"></span></p></div>

也可以是集合类型如下：下边代码中的ng-**开头的均不需要写表达式。只写数据模型属性就可以

<div class="test-div" ng-init="colors=['red','green','blue'];classn=['class1','class2']"><p>The first color is {{colors[0]}}</p><p ng-class="classn[1]">The last color is <span ng-bind="colors[2]"></span></p></div>