AngularJS 01（表达式）

基于JavaScript的框架
单页面应用程序
CRUD（增删改查）操作

环境：
脚本（注意版本）
引入angular.js
指令：
ng-app=”“(一个页面只能有一个)
ng-init=”i=3;n=’admin’”
ng-bind=””
ng-model=””
表达式（属性值）：
{{}}

*AngularJS的版本在1.2.5和1.40的版本的区别很大
1、AngularJS作用于用户自定义的某个区域
2、表达式{{expression }}
表达式内部要想写字符串常量必须加双引号，否则会被认为是变量。
而且如果表达式内部无法追加样式

作用域：

ng-app与data-ng-app=”“

相同且作用域最大

初始化应用程序数据：

ng-init

数据类型：基本数据类型、数值、字符串、对象、数组

单向绑定
*可以将数值绑定在HTML元素上

data-ng-bind

(单向绑定将数值输入到页面)

<span data-ng-bind="books[1].pName" class="label label-success"></span>

他的效果和直接写没有区别

<span class="label label-success">{{books[1].pName}}</span

双向绑定
可以将数据从页面重新写回到数据源

data-ng-model

<input data-ng-model="books[0].count" type="text" class="form-control"/>

<from class="form-inline" data-ng-init = "numA=12;numB=3">
                    <div class="form-group">
                        <input data-ng-model="numA" type="text" class="form-control" />
                        <input data-ng-model="numB" type="text" class="form-control" />
                        <label  class="label label-warning">{{numA+numB}}</label>
                    </div>

                </from>

循环生成元素：（相当于for循环里面的for in）

data-ng-repeat

<div data-ng-app="" data-ng-init="books=[
                {pTotal:'合计',pCount:'数量',pName:'单价',price:10.99,count:5},
                {pTotal:'合计',pCount:'数量',pName:'单价',price:20.99,count:15},
                {pTotal:'合计',pCount:'数量',pName:'单价',price:30.99,count:5}
            ]">
                <div class="list-group">
                    <div data-ng-repeat="b in books" class="list-group-item focus">
                        <span class="label label-success">{{b.pName}}</span>：{{b.price}}<br>
                        <div class="row">
                            <div class="col-sm-2">
                                <span style="line-height: 35px;">{{b.pCount}}：</span>
                            </div>
                            <div class="col-sm-4">
                                <input data-ng-model="b.count" type="text" class="form-control" />
                            </div>
                        </div>
                        {{b.pTotal}}：{{b.price*b.count}}
                    </div>
                </div>

            </div>