AngularJS 最常用的八种功能.docx

AngularJS 最常用的八种功能第一 迭代输出之ng-repeat标签ng-repeat让table ulol等标签和js里的数组完美结合12345ulli ng-repeat=person in persons{{}} is {{person.age}} years old./li/ul你甚至可以指定输出的顺序：1li ng-repeat=person in persons | orderBy:name第二 动态绑定之ng-model标签任何有用户输入，只要是有值的html标签，都可以动态绑定js中的变量，而且是动态绑定。1input type=text ng-model=password对于绑定的变量，你可以使用{{}} 直接引用1spanyou input password is {{password}}/span如果你熟悉fiter，你可以很容易的按你的需要格式输出1span{{1288323623006 | date:yyyy-MM-ddHH:mm:ss Z}}/span第三 绑定点击事件之ng-click事件使用ng-click你可以很容易的为一个标签绑定点击事件。1button ng-click=pressMe()/当然前提是你要在$scope域中定义的自己的pressMe方法。和传统的onclick方法不同，你甚至可以为ng-click方法传递一个对象，就像这样：12345ulli ng-repeat=person in personsbutton ng-click=printf(person)//li/ul当然还有ng-dblclick标签第四 分支语句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled标签分支语句让你在界面上都可以写逻辑判断。1234567891011121314ulli ng-repeat=person in personsspan ng-switch on=person.sexspan ng-switch-when=1you are a boy/spanspan ng-switch-when=2you are a girl/span/spanspan ng-if=person.sex==1you may be a father/spanspan ng-show=person.sex==2you may be a mother/spanspanplease input your babys name:input type=text ng-disabled=!person.hasBaby//spanspan/li/ul第五 校验语法之ng-trim ng-minlength ng-maxlength required ng-pattern 等标签表单中的输入框，你可以使用上面的标签来实现对用户输入的校验。从字面意思上你已经知道了它们的意思。123form name=yourForminput type=text name=inputText required ng-trim=true ng-model=userNum ng-pattern=/^[0-9]*[1-9][0-9]*$/ ng-maxlength=6 maxlength=6//form你可以通过 $scope.yourForm.inputText.$error.required 来判断输入框是否为空你可以通过 $scope.yourForm.inputText.$invalid 来判断输入的内容是否满足ng-pattern，ng-maxlength，maxlength你通过$scope.userNum获得的输入内容是去掉前后空白的，因为ng-trim的存在。第六 下拉框之ng-options标签ng-options是为下拉框专门打造的标签。1select ng-model=yourSelected ng-options=person.id as in persons/select下拉框中显示的是，当你选中其中一个的时候，你可以通过yourSelected得到你选中的person.id.第七? 控制css之ng-style标签ng-style帮你轻松控制你的css属性1span ng-style=myColoryour color/span你可以通过给myColor赋值的形式来改变你想要的效果，就像这样：12$scope.myColor={color:blue};$scope.myColor={cursor:pointer,color:blue};第八? 异步请求之$http对象。AngularJS 提供了一个类似jquery的$.ajax的对象，用于异步请求。在AngularJS中