AngularJS中ng-app、ng-model、ng-bind、ng-init、ng-repeat、自定义指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

1.ng-app 指令初始化一个 AngularJS 应用程序。

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

2.ng-init 指令初始化应用程序数据。

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
      <p>姓名：{{firstName +"    "+lastName}}</p>
</div>

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
      <p>姓名：<span ng-bind="firstName+'    Bod     '+lastName"></span></p>
</div>

字符串与数组

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
       <p>姓名：<span ng-bind="person.firstName"></span></p>
</div>

<div ng-app="" ng-init="points=[1,15,19,2,40]">
    <p>第三个值:{{points[2]}}</p>
 </div>

3. ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

    ng-model是用于表单元素的，支持双向绑定。对普通元素无效；

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以：

• 为应用程序数据提供类型验证（number、email、required）。
• 为应用程序数据提供状态（invalid、dirty、touched、error）。
• 为 HTML 元素提供 CSS 类。
• 绑定 HTML 元素到 HTML 表单。

案例一：
<div ng-app="" ng-init="firstName='John'">
            <p>姓名：<input type="text" ng-model="firstName"/></p>
            <p>你输入的为：{{firstName}}</p>
        </div>

案例二：
<div data-ng-app="" data-ng-init="quantity=1;price=5;">
      <h2>价格计算器</h2>
      数量：<input type="number" ng-model="quantity"/>
      价格：<input type="number" ng-model="price"/>
      <p><b>总价：</b>{{quantity*price}}</p>
</div>

4.ng-bind用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；

    当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。

5.ng-repeat

循环数组
<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
      <p>使用ng-repeat来循环数组</p>
      <ul>
            <li data-ng-repeat="x in names">{{x}}</li>
      </ul>
</div>
 循环对象
<div data-ng-app="" data-ng-init="names=[{name:'AB',county:'AC'},{name:'BB',county:'BC'},{name:'CC',county:'CD'}]">
       <p>使用ng-repeat来循环对象</p>
       <ul>
           <li data-ng-repeat="x in names">{{x.name +','+x.county}}</li>
       </ul>
</div>