angular.js - angular 如何用指令給給列表動(dòng)態(tài)進(jìn)行class切換
問(wèn)題描述
代碼
想要的效果是,給當(dāng)前點(diǎn)擊的那個(gè)添加樣式,其他的清空。
問(wèn)題解答
回答1:不要這么麻煩了,咱們直接用ng-class吧,像這樣:
修正:
好吧,我錯(cuò)了
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title></title></head><body ng-app='myApp' ng-controller='myCtrl'> <ul><li ng-repeat='x in ulList' ng- ng-click='handleActive($index)'>{{ x.li }}</li> </ul> <script type='text/javascript'>var app = angular.module(’myApp’, []);app.controller(’myCtrl’, [’$scope’, function($scope){ $scope.handleActive = function(index){ $scope.currentIndex = index; };$scope.ulList = [{ id: ’1’, li: ’01’},{ id: ’2’, li: ’02’},{ id: ’3’, li: ’03’},{ id: ’4’, li: ’04’} ];}]); </script></body></html>回答2:
用屬性綁定的方式給 ulList 里的每個(gè)元素加個(gè) isSelected 屬性,當(dāng) Click 時(shí)更改 isSelected 的值HTML 中用 ng-class
相關(guān)文章:
1. java - 阿里的開(kāi)發(fā)手冊(cè)中為什么禁用map來(lái)作為查詢的接受類?2. 數(shù)組按鍵值封裝!3. docker不顯示端口映射呢?4. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問(wèn)題5. python3.x - git bash如何運(yùn)行.bat文件?6. python - flask _sqlalchemy 能否用中文作為索引條件7. clone - git sourceTree克隆倉(cāng)庫(kù)時(shí),都不停彈出Password Required彈窗,即時(shí)輸入正確的git賬號(hào)密碼還是彈出8. javascript - webpack中alias配置中的“@”是什么意思?9. javascript - ES6規(guī)范下 repeat 函數(shù)報(bào)錯(cuò) Invalid count value10. 主題切換問(wèn)題,用過(guò)別人的webapp在后臺(tái)切換模板主題后手機(jī)端打開(kāi)網(wǎng)頁(yè)就是切換到的主題了
