Angular 中間部分 2 1 內建指令和表單

2021-08-05 21:33:56 字數 2709 閱讀 1299

基於條件,用於顯示或隱藏乙個元素,

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 ...