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>