基於條件,用於顯示或隱藏乙個元素,
true顯示,false隱藏
div>//never shows
div>// str=yes shows
根據返回值,切換不同元素
class="container" [ngswitch]="myvar">
var is adiv>
var is bdiv>
var is something else
div>
div>
設定指定css屬性,
"">
...
定義css class,
有css檔案如下:
.bordered
在html中可以直接引用
設定[ngclass]=""
this is always bordereddiv>
或者
這個div有3個classbase
,blue
,round
遍歷,
*ngfor="let item of items".
當item是陣列時
}}
有時需要index,index裡面的排序號,由0開始
class="ui list" *ngfor="let c of cities; let num = index">
class="item">}-
}div>
div>
出現如下:
1-item1
2-item2
3-item3
不進行資料繫結和渲染,有時需要列印純粹的},而不是繫結content資料。
class="pre"
ngnonbindable>
← this is what
}rendered
span>
**看起來簡單,只需定義tag,使用者輸入,然後上傳。
**的難點:
- 更改資料,頁面和伺服器端
- 提交資料需要在頁面有所體現
- 輸入檢測
- ui清楚
- 測試**,在不借助dom selectors的情況下
在angular中,有如下工具:
- formcontrols :輸入資料處理
- validators :輸入檢測
- observers : 觀察改變和反應
formcontrol
代表乙個input輸入框
formgroup
配合formcontrol
實現多個輸入框
let personinfo = new formgroup()
formsmodule
: ngmodel and ngform
reactiveformsmodule
: formcontrol and ngformgroup
輸入表單html簡單demo p141,p164
ngform: 會自動關聯任何 tags
提供:
1,a formgroup named ngform
2,a (ngsubmit) output
#f="ngform"
(ngsubmit)="onsubmit(f.value)"
表示了創造了乙個區域性變數,#f,
上傳**時,用onsubmit函式傳遞f.value引數。
p143, p166
class=「field」>
for=「skuinput」>skulabel>
type=「text」
id=「skuinput」
placeholder=「sku」
name=「sku」
ngmodel>
div>
name=「sku」
建立乙個sku的controller,
單項資料繫結
ngmodel指的是class,和物件
ngmodel來自於selector,用在dom和模版中
更加自由化定義表單,
匯入formbuilder,formgroup
需要依賴注入,(dependency injection),在constructor配置
formbuilder主要用兩個部分
- control
- group
配置 myform: formgroup;
建立myform的formgroup
在html中使用自建myform
p151,p174
需要controller
p157 p180 檢測example
在元件內匯入validators,abstractcontrol
在html內使用
p159 p182 指定validator
雙向繫結模型和**
angular內建事件
angular內建事件 includecontentloaded emit事件 includecontentrequested emit事件 從呼叫nginclude的作用域上傳送,每次nginclude的內容被請求的時候,都會發布該事件 viewcontentloaded emit事件 locat...
Angular 常見內建指令
指令 就是擴充套件了html的基本功能,通過額外的標籤 屬性來增強html功能 angular的指令在頁面中體現出來就是乙個標籤 屬性 class名稱 注釋等等 常見指令,按照指令的功能,劃分為五大類 1.控制指令,用於angular應用程式載入流程控制 2.渲染指令,用於angular將資料在網頁...
angular常用內建指令
指令名稱 描述用來定義模組的作用範圍 ng controller 用來定義控制器的作用範圍 ng repeat 迴圈遍歷陣列 ng bind 繫結資料 同 ng show 用來顯示或隱藏元素 值為true false 原理是設定元素的display ng hide 用來顯示或隱藏元素 值為true ...