angular學習筆記 九 css類和樣式3

2022-03-17 22:02:50 字數 1537 閱讀 6705

再來看乙個選擇li列表的例子:

點選li中的任意項,被點選的li高亮顯示:

doctype html

>

<

html

>

<

head

>

<

title

>6.3css類和樣式

title

>

<

meta

charset

="utf-8"

>

<

script

src="../angular.js"

>

script

>

<

script

src="script.js"

>

script

>

<

style

type

="text/css"

>

li.cur

style

>

head

>

<

body

>

<

div

ng-controller

= "restaurant"

>

<

ul>

<

li ng-repeat

="restaurant in restaurants"

ng-class

=""ng-click

="choose($index)"

>

<

span

>}

span

><

span

>}

span

><

span

>}

span

>

li>

ul>

div>

body

>

html

>

function

restaurant ($scope),

];$scope.choose = function

(i)}

ng-class

="":

在這裡,ng-class屬性的cur類名,繫結表示式 $index==selrow,

然後給每個li繫結點選事件**,點選任意li,就把selrow的值變為$index.這樣,當前被點選的項就會被新增類名cur,高亮顯示.

這裡可以看到,angular繫結的事件**,可以在執行的時候傳入引數

原始狀態:

點選第二項:

Angular學習筆記 Angular生命週期

生命週期函式通俗的講就是元件建立 元件更新 元件銷毀的時候會觸發的一系列的方法。當 angular 使用建構函式新建乙個元件或指令後,就會按下面的順序在特定時刻呼叫這些生命週期鉤子方法。當 angular 使用建構函式新建乙個元件或指令後,就會按下面的順序在特定時刻呼叫這些生命週期鉤子方法 鉤子用途...

Angular學習筆記

1.nodejs 2.npm 3.cnpm 4.yarn 4.vscode 1.建立專案的 命令 ng new project name style scss 引數 style 使用的css型別,可以是css,sacc,scss,less,預設值是css 2.初始化node modules 命令 1...

angular學習筆記

時隔一年之後重新學習angularjs,感慨良多。去年剛剛接觸web程式設計的時候,朋友告訴我angularjs很好用,於是在僅僅了解html和css開始學習angularjs,困難程度可想而之,而且並不明白其價值,武斷的認為通過服務端可以不需要angular之類的工具解決所有問題。一年之後,對js...