菜鸟笔记-AngularJS 5月24日初学习

AngularJS 简介和表达式
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
ng-init 指令初始化 AngularJS 应用程序变量。
module定义了 AngularJS 应用。
controller 用于控制 AngularJS 应用。
ng-repeat 指令会重复一个 HTML 元素
ng-repeat 指令用在一个对象数组上:
directive 函数来添加自定义的指令
ng-show 属性返回 true 的情况下显示html元素。
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):
你可以通过以下方式来调用指令:
元素名
属性
类名
注释
你可以限制你的指令只能通过特定的方式来调用
restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用


restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
1  ng-app在一个网页只能有一个
2  ng-bind在span里有效,在input无效 原因:ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
注意是innerHTML。 input 没有innerHTML。属性
3 AngularJS 表达式写在双大括号内:{{ expression }}。对input 和span都有效
 
1 获取模块
 var app = angular.module('myApp', []);
2获取控制器
app.controller('myCtrl', function($scope) {
})


1 ng-init 变量用;分隔
2{}}可以直接写算数运算符
3 ng-init 里面可以放对象 obj={a:1}; 在{{}}直接写obj.a
4 ng-init 里面可以放数组 arr=[1,2];  在{{}}直接写arr[0]


AngularJS 指令
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model="firstName" 进行同步。
比如 {{ quantity * price }} 乘积随着变量改变而改变


重发一个元素的写法:ng-repeat="x in names"       {{ x }}


添加自定义指令:
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
         restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});


使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:


调用自定义指令
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<div class="runoob-directive"></div>
<!-- directive: runoob-directive -->


给ng-model 绑定的数据赋值
$scope.name = "John Doe";


验证数据
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
$error 所有错误信息 


















猜你喜欢

转载自blog.csdn.net/qq_25744257/article/details/80421254