Angular 表达式(AngularJs Expression)

表达式介绍(expression intro):

angular表达式可以写在双括号中{{expression}}，也可以写在指示(directive)中:ng-bind="expression"

angular会解析表达式，并返回这个表达式一开始所被赋予的值。Anjularjs表达式和javascript表达式很像，这

个表达式可以是包含文字(literals),操作符(operators),变量 (variables)。

举个栗子

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <body>
        <div ng-app="">
            <p>My first expression: {{ 5 + 5 }}</p>
        </div>
    </body>
</html>

如果去除了ng-app标签的话，表达式便无法正常显示这个表达式的值：

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <body>
        <div ng-app="">
            <p>My first expression: {{ 5 + 5 }}</p>
        </div>
        <div>
            <p> My second expression: {{ 5 + 5 }}</p>
        </div>
    </body>
</html>

你可以把表达式放到你喜欢的任何地方，angularjs会非常简单的解析这个表达式，并返回结果

举个栗子：

下面将使用angularjs来修改css的属性：

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <body>
        <div ng-app="" ng-init="myCol='lightblue'">
            <input style="backgroud-color: {{myCol}}" ng-model="myCol">
        </div>
    </body>
</html>

注意：ng-app的名字在同一个网页中不可以重复，否者会造成显示的不正常。

angularjs number

Angularjs数字和javascript数字很相像：

举个栗子：

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <body>
        <div ng-app="" ng-init="quantity=1;cost=5">
            <p>Total in dollar: {{ quantity * cost }}</p>           
        </div>
    </body>
</html>

也可以使用ng-bind这个指示来实现同样的功能：

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <body>
        <div ng-app="" ng-init="quantity=1;cost=5">
            <p>Totoal in dollar : <span ng-bind="quantity * cost"></span></p>
        </div>
    </body>
</html>

注意：

这里的ng-app=""不能加值，否者这个会无法显示。

AngularJS Object

angularJs对象和javascript对象很像：

下面举个angularJS对象的栗子：

        <div ng-app="" ng-init="person={firstName:'Jone',lastName:'Doe'}"
            <p>The name is {{ person.lastName }} </p>              
        </div>

除了使用变量表达的方式来显示对象值之外，也可以使用使用ng-bind这个指示(directive)来显示值。具体的代码如下：

        <div ng-app="" ng-init="persion={firstName:'John',lastName:'Doe'}"
            <p>The name is <span ng-bind="persion.lastName"></span></p>
        </div>

AngularJS Array

angularJs数组和JavaScript数组也非常像：

代码如下：

        <div ng-app="" ng-init="points=[1,2,3,4,4]">
            <p>The second result is {{ points[1]}}</p>
        </div>

使用ng-bind的方式如下所示：

        <div ng-app="" ng-init="points=[1,2,3,4,4]">
            <p>The second result is <span ng-bind="points[1]"></span></p>
        </div>

总结：

像javascript表达式一样，anjularJS也可以包括一些字符串，操作符，变量。

但是两者还是各有优势，angular表达式可以写在html标签中，javascript不行；

angular表达式支持过滤器，但是javascript不支持。

javascript可以支持条件(conditionals)，循环(loops)，和异常(exceptions)处理。