AngularJs学习日记[4]:AngularJS表达式【2】

1、数字计算demo:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

<script type="text/javascript" src="angular.min.js"></script>

</body>
</html>

运行结果:

这里进行的不再是常量计算,而是进行的变量计算,变量在计算前通过ng-init进行了初始化。

2、字符串计算demo:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

<script type="text/javascript" src="angular.min.js"></script>

</body>
</html>

3、对象计算demo:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

<script type="text/javascript" src="angular.min.js"></script>

</body>
</html>

4、数组计算demo:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The points are {{ points[2] }}</p>

</div>

<script type="text/javascript" src="angular.min.js"></script>

</body>
</html>

这里所有的变量计算的初始化都是在元素的自定义属性ng-init中进行的,这并不是一个好的方法,AngularJs是可以将初始化工作放到控制器中的:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="namesController">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function namesController($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
}
</script>

</body>
</html>

参考文献:http://www.w3schools.com/angular/default.asp


你可能感兴趣的:(AngularJs学习日记[4]:AngularJS表达式【2】)