angular.module('antsins.controllers')

.controller('GoodsCtrl',

  ['$scope', function($scope){

   //这里就能写angular代码了

    $scope.name ='tom'

}]

<input type="text" ng-model="yourname" placeholder="World">

///html5表单验证属性与angular配合，要是form里有验证规则没有通过

//则$valid为false

<input type="text" name="cheshi" ng-model="myName" required/>

    <p ng-bind="myForm.cheshi.$valid"></p>

//复选框，checkboxModel.value1 选中为true,没选中为false

<input type="checkbox" ng-model="checkboxModel.value1">

//直接使用ng-bind-html报错

<p ng-bind-html="myHTML"></p>

解决方法,需要将html代码标记为信任，如下

.controller('FormController', ['$scope','$sce', function($scope,$sce) {

        $scope.myHTML =$sce.trustAsHtml(

            'I am an <code>HTML</code>string with ' +

            '<a href="#">links!</a> and other <em>stuff</em>');

    }])

//<pre ng-bind-template="{{salutation}} {{name}}!"></pre>

//直接使用ngChange报错

<input type="text"  ng-change="onChange() "/>

解决方法：必须加上：ng-model="age"

<input type="text" ng-model="age" ng-change="onChange() "/>

//利用ng-class 实现简单的动画

.base-class {

  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;

}

.base-class.my-class {

  color: red;

  font-size:3em;

}

//ng-click="myVar='my-class'"  只要一点击就给myVar赋值

<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">

<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">

<br>

<span class="base-class" ng-class="myVar">Sample Text</span>

//ngClassEven  和 ngClassOdd 指令的使用 奇数就使用odd,偶数就使用even

//常于ng-repeat配合使用

//ng-init 数据初始化，相当于var,给一个变量赋值

<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">

  <li ng-repeat="name in names">

   <span ng-class-odd="'odd'" ng-class-even="'even'">

     {{name}}

   </span>

  </li>

</ol>

//ngCloak  使用后没有{{}} 闪屏的情况,相当于ng-bind

<div id="template1" ng-cloak>{{ 'hello' }}</div>

<div id="template2" class="ng-cloak">{{ 'world' }}</div>

//ngCopy  输入框中的文字被复制的时候会触发的事件

//ngCut   输入框中的文字被剪切的时候就会触发的事件

asdfasdfasd

<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">

copied: {{copied}}

<input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">

cut: {{cut}}

//ng-csp

修改 AngularJS 中关于 "eval" 的行为方式及内联样式：

ng-csp 指令用于修改 AngularJS 的安全策略。

如果使用了 ng-csp 指令， AngularJS 将不会执行eval 函数，这样就无法注入内联样式。

设置 ng-csp 指令为 no-unsafe-eval, 将阻止 AngularJS 执行 eval 函数，但允许注入内联样式。

设置 ng-csp 指令为 no-inline-style, 将阻止 AngularJS 注入内联样式，但允许 执行 eval 函数。

如果开发 Google Chrome 扩展或 Windows 应用 ng-csp 指令是必须的。

注意:ng-csp 指令不会影响 JavaScript,但会修改 AngularJS 的工作方式，这就意味着: 你仍然可以编写 eval 函数,

 且也可以正常执行, 但是 AngularJS 不能执行它自己的 eval 函数。如果采用兼容模式，会降低 % 的性能。

//ngDisabled  禁用指令：值为true的时候禁用button

<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>

<button ng-model="button" ng-disabled="checked">Button</button>

//ngHref,直接用href 就不能使用angular语法

<a id="link-3" ng-href="/{{'123'}}">link </a>

/ngIf  为true，则span显示

<span ng-if="checked" class="animate-if">

  This is removed when the checkbox is unchecked.

</span>

//ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。

//ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。

//如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，

//否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最//本//质/的区别是，

//它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。

//ng-keydowm 返回的按键的字符值

//ngkeypress 返回的ASSCII字符

//ngList 输入的转为数组，输入逗号会分隔

<input name="namesInput" ng-model="names" ng-list required></label>

//ngList 输入的转为数组，输入换行会分隔

<textarea ng-model="list" ng-list="
" ng-trim="false"></textarea>

//form 中有输入不不符合规范的时候

<code>{{form.input.$valid}}为false

//ngModel 适用的标签

For basic examples, how to use ngModel, see:

input

text

checkbox

radio

number

email

url

date

datetime-local

time

month

week

select

textarea

ng-valid: the model is valid    //有效的输入

ng-invalid: the model is invalid //无效的输入

ng-valid-[key]: for each valid key added by $setValidity

ng-invalid-[key]: for each invalid key added by $setValidity

ng-pristine: the control hasn't been interacted with yet

ng-dirty: the control has been interacted with

ng-touched: the control has been blurred

ng-untouched: the control hasn't been blurred

ng-pending: any $asyncValidators are unfulfilled

ng-empty: the view does not contain a value or the value is deemed "empty", as defined by the ngModel.NgModelController method

ng-not-empty: the view contains a non-empty value

//ngModelOptions 数据模型的选项配置

<input type="text" name="userName"

             ng-model="user.name"

             ng-model-options="{ updateOn: 'blur' }"

           />

//上面这个例子中只有失去焦点的时候才会根新数据

ng-model-options="{ updateOn: 'default blur' }"

//上面的例子中，输入会更新model,失去焦点也会更新model(感觉这个没太必要)

debounce:{default:,blur:}}"

//上面的例子中，时间间隔1秒没有输入没更新model，失去焦点会立即更新model

ng-model-options="{ debounce: 1000 }"

//上面这个例子中，如果时间间隔1s内没 有继续输入就会更新数据

//ngMouseDown  鼠标点击

//ngMouseuo  鼠标松开事件

//ng-non-bindable 指令用于告诉 AngularJS 当前的 HTML 元素或其子元素不需要编译。

//在这个标签内的指令不会被执行

<div ng-non-bindable>Ignored: {{1 + 2}}</div>

//隐藏的元素会被展开

<details id="details" ng-open="open">

   <summary>Show/Hide me</summary>

</details>

//<select ng-model="myColor" ng-options="color.name for color in colors">

控制器中数据

$scope.colors = [

      {name:'black', shade:'dark'},

      {name:'white', shade:'light', notAnOption: true},

      {name:'red', shade:'dark'},

      {name:'blue', shade:'dark', notAnOption: true},

      {name:'yellow', shade:'light', notAnOption: false}

    ]

//<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">

select中数据会有嵌套

//根据color.notAnOption 的boolear值去判断这个选项是不是禁用了

<select ng-model="myColor"

          ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">

    </select>

//ngPaste 粘贴数据进去的时候会触发的事件

//ng-pattern="regex" 正则判断

 $scope.regex = '\\d+';

 <input type="text" ng-model="model" id="input" name="input" ng-pattern="regex" /><br>

//ngPluralize  隐藏属性？（查不到资料

//为true是，输入框是只读的

<input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />

/ng-src 写法

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

//ng-style 写法

<span ng-style='{"color":"blue"}'>Sample Text</span>

//ng-submit  表单提交触发的事件

//ng-switch  内容的切换

//ng-value

//script

用来写模块

<script type="text/ng-template" id="/tpl.html">

  Content of the template.

</script>

<a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>

<div id="tpl-content" ng-include src="currentTpl"></div>