이 글에서는 angularjs과 일반적으로 사용되는 명령어 작성 방법의 차이점을 주로 소개합니다. 비록 큰 차이는 없지만 여전히 차이가 있습니다. 또한 심각하게 받아들여야 합니다. 이 글을 함께 읽어보자
1:angularjs command
1.ng -bind#🎜🎜 #
HTML 요소의 내용을 주어진 변수 또는 표현식의 값으로 바꾸기
<p ng-bind="{{text}}"></p>2.ng-blur#🎜 🎜##🎜🎜 #HTML 요소가 포커스를 잃었을 때 실행해야 하는 함수(<a></a>, <input>, <select>, <code><textarea> 지원)
<input ng-blur="pay()" />
3.ng-checked/ng-disabled<a>, <input>, <select>, <textarea>支持）
<input type="checkbox|radio" ng-checked="flag" ng-disabled="flag"></input> //flag为布尔类型
3.ng-checked/ng-disabled
ng-checked设置复选框(checkbox)或单选按钮(radio)的 checked 属性
ng-disabled表达式返回 true 则表单字段将被禁用(<input>, <select>, 或 <textarea>)
//写法一
<p ng-class="home"></p>
//写法二
<p ng-class="{'red':flag,'green':'!flag'}"></p>
//flag为true则添加red类名，false则添加green类名4.ng-class
给 HTML 元素动态绑定一个或多个 CSS 类。
<button ng-click="addpay($event)">OK</button> //$event为当前元素的多种属性
5.ng-click
<p ng-repeat="(index,item) in list"></p>
// 每项值：{{item}}
// 下标：{{index}}6.ng-repeat
<img [src]="imageUrl">
ng-app 定义应用程序的根元素。
ng-bind 绑定 HTML 元素到应用程序数据
ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template 规定要使用模板替换的文本内容
ng-blur 规定 blur 事件的行为
ng-change 规定在内容改变时要执行的表达式
ng-checked 规定元素是否被选中
ng-class 指定 HTML 元素使用的 CSS 类
ng-class-even 类似 ng-class，但只在偶数行起作用
ng-class-odd 类似 ng-class，但只在奇数行起作用
ng-click 定义元素被点击时的行为
ng-cloak 在应用正要加载时防止其闪烁
ng-controller 定义应用的控制器对象
ng-copy 规定拷贝事件的行为
ng-csp 修改内容的安全策略
ng-cut 规定剪切事件的行为
ng-dblclick 规定双击事件的行为
ng-disabled 规定一个元素是否被禁用
ng-focus 规定聚焦事件的行为
ng-form 指定 HTML 表单继承控制器表单
ng-hide 隐藏或显示 HTML 元素
ng-href 为 the <a> 元素指定链接
ng-if 如果条件为 false 移除 HTML 元素
ng-include 在应用中包含 HTML 文件
ng-init 定义应用的初始化值
ng-jq 定义应用必须使用到的库，如：jQuery
ng-keydown 规定按下按键事件的行为
ng-keypress 规定按下按键事件的行为
ng-keyup 规定松开按键事件的行为
ng-list 将文本转换为列表 (数组)
ng-model 绑定 HTML 控制器的值到应用数据
ng-model-options 规定如何更新模型
ng-mousedown 规定按下鼠标按键时的行为
ng-mouseenter 规定鼠标指针穿过元素时的行为
ng-mouseleave 规定鼠标指针离开元素时的行为
ng-mousemove 规定鼠标指针在指定的元素中移动时的行为
ng-mouseover 规定鼠标指针位于元素上方时的行为
ng-mouseup 规定当在元素上松开鼠标按钮时的行为
ng-non-bindable 规定元素或子元素不能绑定数据
ng-open 指定元素的 open 属性
ng-options 在 <select> 列表中指定 <options>
<input>, < ;선택> 또는 <텍스트 영역>)
<button [disabled]="isUnchanged">按钮是禁用的</button>
4.ng-class#🎜🎜 #
#🎜🎜 #하나 이상의 CSS 클래스를 HTML 요소에 동적으로 바인딩합니다.<p [ngClass]="classes">[ngClass]绑定到classes 属性</p>
5.ng-클릭
<table border=1> <tr><td [attr.colspan]="1 + 1">One-Two</td></tr> <tr><td>Five</td><td>Six</td></tr> </table>
6.ng-반복
<input [(ngModel)]="currentUser.firstName">
ng-app 애플리케이션의 루트 요소를 정의합니다.
ng-bind HTML 요소를 애플리케이션 데이터에 바인딩
ng-bind-html HTML 요소의 innerHTML 바인딩 응용 프로그램 데이터에 저장하고 HTML 문자열에서 위험한 문자를 제거합니다.
#🎜🎜##🎜🎜##🎜🎜#ng-bind-template 템플릿으로 바꿀 텍스트 내용을 지정합니다.#🎜🎜 ##🎜🎜# #🎜🎜##🎜🎜#ng-blur 흐림 이벤트의 동작을 지정합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-change 내용이 변경될 때 실행할 표현식을 지정합니다. #🎜🎜 ##🎜🎜##🎜🎜##🎜🎜#ng-checked 요소 선택 여부를 지정합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-class HTML 요소에서 사용되는 CSS 클래스를 지정합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-class-even ng-class와 유사하지만 짝수 행에서만 작동#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng -class-odd ng-class와 비슷하지만 홀수 줄에서만 작동합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-click 요소를 클릭할 때 동작 정의#🎜🎜##🎜🎜 # #🎜🎜##🎜🎜#ng-cloak 앱 로딩 시 깜박임 방지 🎜🎜##🎜🎜##🎜🎜#ng-copy 복사 이벤트 동작 지정#🎜🎜##🎜🎜## 🎜🎜##🎜🎜#ng-csp 콘텐츠의 보안 정책 수정#🎜🎜##🎜🎜 ##🎜🎜##🎜🎜#ng-cut 컷 이벤트의 동작을 지정합니다#🎜🎜##🎜🎜# #🎜🎜##🎜🎜#ng-dblclick 두 번 클릭 이벤트의 동작을 지정합니다#🎜🎜##🎜🎜# #🎜🎜##🎜🎜#ng-disabled 요소가 비활성화되었는지 여부를 지정합니다#🎜🎜## 🎜🎜##🎜🎜##🎜🎜#ng-focus 포커스 이벤트의 동작을 지정합니다#🎜🎜##🎜🎜## 🎜🎜##🎜🎜#ng-form HTML 양식을 지정하여 컨트롤러 양식을 상속합니다#🎜🎜# #🎜🎜##🎜🎜##🎜🎜#ng-hide HTML 요소 숨기기 또는 표시#🎜🎜##🎜🎜## 🎜🎜##🎜🎜#ng-href<a>에 대한 링크를 지정합니다. ; 요소#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-if 조건이 거짓인 경우 HTML 요소 제외#🎜🎜##🎜🎜##🎜🎜##🎜🎜 #ng-include 애플리케이션에 HTML 파일 포함#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-init 애플리케이션 초기화 값 정의 #🎜🎜##🎜🎜##🎜🎜##🎜🎜# ng-jq 다음과 같이 애플리케이션에서 사용해야 하는 라이브러리를 정의합니다. jQuery#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng- keydown 키 누르기 이벤트의 동작을 지정합니다#🎜🎜##🎜🎜 ##🎜🎜##🎜🎜#ng-keypress 키 누르기 이벤트의 동작을 지정합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜# ng-keyup 키 릴리스 이벤트의 동작을 지정합니다#🎜🎜 ##🎜🎜##🎜🎜##🎜🎜#ng-list 텍스트를 목록(배열)으로 변환#🎜🎜##🎜🎜##🎜🎜## 🎜🎜#ng-model HTML 컨트롤러의 값을 바인딩합니다. 애플리케이션 데이터에 #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-model-options 모델 업데이트 방법을 지정합니다#🎜🎜##🎜🎜## 🎜🎜##🎜🎜#ng-mousedown 마우스 버튼을 눌렀을 때 동작을 지정합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-mouseenter 마우스 포인터가 요소를 통과할 때 동작을 지정합니다#🎜🎜# #🎜🎜##🎜🎜 ##🎜🎜#ng-mouseleave 요소를 떠날 때 마우스 포인터의 동작을 지정합니다. 때 동작 #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-mouseover 마우스 포인터가 위에 있을 때 동작을 지정합니다 요소 요소에서 마우스 버튼을 놓았을 때의 동작을 지정합니다. #🎜🎜##🎜🎜#ng-open 요소의 열기 속성을 지정합니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng- options <select> 목록에 지정됨 <options>#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-paste 다음 동작을 지정합니다. 이벤트 붙여넣기#🎜🎜##🎜🎜##🎜🎜##🎜🎜 #ng-pluralize 현지화 규칙에 따라 정보 표시#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng-readonly 읽기 전용 속성 지정 요소 중#🎜🎜##🎜🎜##🎜🎜##🎜🎜# ng-repeat 컬렉션의 각 데이터 항목에 대한 템플릿을 정의합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜#ng -selected 요소의 선택된 속성을 지정합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜 #ng-show HTML 요소 표시 또는 숨기기#🎜🎜#ng-src 指定 元素的 src 属性
ng-srcset 指定 元素的 srcset 属性
ng-style 指定元素的 style 属性
ng-submit 规定 onsubmit 事件发生时执行的表达式
ng-switch 规定显示或隐藏子元素的条件
ng-transclude 规定填充的目标位置
ng-value 规定 input 元素的值
想看更多推荐到PHP中文网angularjs学习手册中学习。
二：angular指令
imageUrl 属性：
<img [src]="imageUrl">
[disabled]当组件为 isUnchanged( 未改变 ) 时禁用一个按钮：
<button [disabled]="isUnchanged">按钮是禁用的</button>
设置指令的属性：
<p [ngClass]="classes">[ngClass]绑定到classes 属性</p>
表格的colspan/rowspan
<table border=1> <tr><td [attr.colspan]="1 + 1">One-Two</td></tr> <tr><td>Five</td><td>Six</td></tr> </table>
[(NgModel)]
<input [(ngModel)]="currentUser.firstName">
NgIf
<p *ngIf="currentUser">Hello,{{currentUser.firstName}}</p>NgFor
<p *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</p>（click）
<button type="submit" class="btn btn-primary" (click)="hide()">确定</button>
[(checked)]
<input type="checkbox" [(checked)]="checkflag">
common
NgClass NgComponentOutlet NgForOf NgIf NgPlural NgPluralCase NgStyle NgSwitch NgSwitchCase NgSwitchDefault NgTemplateOutlet
forms
CheckboxControlValueAccessor CheckboxRequiredValidator DefaultValueAccessor EmailValidator FormArrayName FormControlDirective FormControlName FormGroupDirective FormGroupName MaxLengthValidator MinLengthValidator NgControlStatus NgControlStatusGroup NgForm NgModel NgModelGroup NgSelectOption PatternValidator RadioControlValueAccessor RequiredValidator SelectControlValueAccessor SelectMultipleControlValueAccessor
router
RouterLink RouterLinkActive RouterLinkWithHref RouterOutlet
好了，以上就是本篇文章的全部内容了（想看更多就到PHP中文网angularjs学习手册中学习），有问题的可以在下方留言提问
위 내용은 Anglejs와 각도 지시문 작성의 차이점은 무엇입니까? AngularJ와 Angular에서 일반적으로 사용되는 명령어 작성 방법의 차이점을 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
