AngularJS點選新增樣式、點選變色設定

阿新 • • 發佈：2019-01-11

首先解釋需求是這樣的，有個列表，當你點選哪一行時，哪一行背景變成灰色，在JQ中，大家都知道，這是非常容易的，加一個addClass就行了，那麼AngularJS如何實現呢？

點選變色

下面我們看程式碼部分

<!doctype html>
<html ng-app="a2_11">
<head>
    <title>新增元素樣式</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
<style 
 type="text/css">
    body{font-size:12px}
    ul{margin:0;padding:0;width:408px;list-style-type:none}
    ul li{float:left;padding:5px 0}
    ul .odd{color:#0026ff}
    ul .even{color:red}
    ul .bold{font-weight:700}
    ul li span{float:left;padding:0 10px;width:52px}
    ul .focus{background-color:#ccc 
}
</style>
</head>
<body>
    <div ng-controller="c2_11">
        <ul>
            <li ng-class="{{bold}}">
                <span>序號</span>
                <span>姓名</span>
                <span>性別</span>
                <span>是否首條</span 
>
                <span>是否尾條</span>
            </li>
            <li ng-class-odd="'odd'"
                ng-class-even="'even'"
                ng-repeat=" stu in data"
                ng-click='li_click($index)'
                ng-class='{focus: $index==focus}'>
                <span>{{$index+1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{$first?'是':'否'}}</span>
                <span>{{$last?'是':'否'}}</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var a2_11 = angular.module('a2_11', []);
        a2_11.controller('c2_11', ['$scope', function ($scope) {
            $scope.bold = "bold";
            $scope.li_click = function (i) {
                $scope.focus = i;
            };
            $scope.data = [
            { name: "張明明", sex: "女" },
            { name: "李清思", sex: "女" },
            { name: "劉小華", sex: "男" },
            { name: "陳忠忠", sex: "男" }
            ];
        }]);
    </script>
</body>
</html>

1、首先，第一個< li >元素的"ng-class"值與"bold"屬性值繫結,使得該值指定的樣式加粗，這個相信大家都能看懂；

2、使用“ng-class-odd”和"ng-class-even"樣式分別繫結奇數和偶數行的樣式,從而實現了隔行換色的功能；

3、最後我們解釋一下，如何使得所點選的< li >元素變色
 ①在< li >元素的單擊事件中，將執行$scope物件中新增的"li_click()"方法;

 ②在該方法中將"$index(行號值)"作為實參傳給方法，並將"focus"屬性值設為“$index”值；

 ③因此當單擊某行< li >元素時,"focus"屬性值將變為相應的"$index"；

 ④此時,< li >元素的"ng-class"樣式指令通過key/value物件的方式指定該元素需要新增的樣式,由於單擊< li >元素時，"$index"變數值和"focus"屬性值相同，也就是說"$index==focus"的返回值為true；

 ⑤此時您應該明白了，"ng-class"的樣式指令值變為"focus";

 ⑥經過上面的分析及操作，我們實現了單擊< li >元素時,新增背景樣式的效果.

AngularJS點選新增樣式、點選變色設定

首先解釋需求是這樣的，有個列表，當你點選哪一行時，哪一行背景變成灰色，在JQ中，大家都知道，這是非常容易的，加一個addClass就行了，那麼AngularJS如何實現呢？下面我們看程式碼部分 <!doctype html> <h

Notification（Notification的通知欄常駐、各種樣式、點選無效、禁止滑動刪除、相容低版本）

Notification（Notification的通知欄常駐、Notification的各種樣式、Notification點選無效、Notification禁止滑動刪除） Android的Notification是android系統中很重要的一個機制，產品人員常常利用通

input相關：點選時邊框顏色去除、placeholder樣式、點選時隱藏

♦ 點選聚焦時原生邊框顏色去除border修改無用input{outline:none} input:focus { outline: none; }♦ placeholder樣式修改（沒有統一寫法，必須分開寫）input::-webkit-input-placeholde

微信小程式遍歷迴圈中點選新增樣式

.wxml中： <view class='section'> <scroll-view id='sv' scroll-y style="width:150rpx;height:{{hei}}px;"> <block wx:for="{{left

Android基礎控件——AlertDialog、ProgressDialog實現單選對話框、多選對話框、進度條對話框、輸入框對話框

事先 pre 進度技術分享 android基礎水平介紹 iss support AlertDialog、ProgressDialog實現單選對話框、多選對話框、進度條對話框、輸入框對話框事先說明：對話框應選用android.support.v7這個包底下的組件

Java自學之路-Java中級教程-18：SpringMVC列表框select和單選框radio、多選框checkbox的處理

頁面表單還有很多控制元件，這一節介紹比較常用的列表框和單選框、多選框。列表框就是下拉列表選項，用在有多個選擇的情況，比如一大堆的國家和城市可以做成一個下拉列表供使用者選擇。單選框用在只能選擇一種選項的情況，比如性別要麼選男，要麼選女。多選框即是可以多選，比如興趣愛好可以選電腦

AngularJS 分頁點選當前頁新增樣式，其餘移除樣式

分頁，前端框架是AngularJS，分頁的點選效果實現還是有點繞的。之前用jQuery寫，addClass和removeClass很快就實現點選效果了。AngularJS的點選效果實現如下（當前是第n

HTML 幾個Table例項。單元格合併、點選新增行

1.不規則的表，單元格合併樣式：原始碼：<---------------------------------------------------------------start----------------------------------------------

為RecyclerView新增優雅的點選事件、長按事件

本篇參考：Hugo的文章-Getting your clicks on RecyclerView 效果如下一、完整的點選、長按事件支援類先要準備一份resources res -> values ->

vue之選單新增選擇，知識：資料雙向繫結、迴圈渲染、事件點選以及按鍵的點選

要求： 1.可以增加菜名 2.可以刪除菜名 3.點選選擇菜名後自動增加到已選選單中 4.可以在已選選單中取消選擇程式碼： <template> <div> <input type="text" ref="add"> &

H5音訊樣式修改，拖拽、點選進度操作、總時長載入

<audio/>標籤樣式修改修改原因：不同手機展示的樣式不同，特別是IOS 和安卓區別很大，需要統一樣式。修改後樣式：修改理解： 1>“點選播放”和"點選暫停" 呼叫原生audio.play() 和 audio.pause()來對進度條進

vue2.x v-for下點選新增class 樣式重新整理不消失實現類似多選的功能

下面程式碼實現的功能： v-for遍歷下的元素，點選哪一個就給哪一個新增changeCollect下的樣式，如果已經添加了樣式，再點選就取消樣式。點選下一個時，點選過的樣式不會消失，類似於多選 1、template程式碼 <li :class="{changeColl

【JavaScript】點選的新增樣式，其他的刪除樣式

author：咔咔 wechat：fangkangfk layui.use(['jquery',], function(args){ var $= layui.jquery; $('.type').click(function

a標籤 CSS樣式滑鼠懸停、點選、點選後、選定

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> a:link { color: #0

Android新增可拖動、點選的懸浮視窗

原文地址：http://mobile.9sssd.com/android/art/1288，貌似這個地址也不是原創不過我是看的這個。。就這個吧。。。這個例子蠻不錯，簡單易懂，註釋也很全，只是執行之後發現有個小bug，往左上角拖動的時候會執行點選事件，造成的原因也很簡單，就是

RecyclerView展示固定資料、上拉載入更多、下拉重新整理、點選事件、長按點選事件、刪除條目、重新整理條目、新增條目、多條目載入

1、依賴： implementation 'com.android.support:recyclerview-v7:27.0.2' 2、activity_main、 <?xml version="1.0" encoding="utf-8"?> <Li

vue中v-for迴圈選中點選的元素並對該元素新增樣式

相信大家都會遇到這種情況：v-for迴圈時，我只需要點選到的元素做出相應反應，其他的元素不變；但是往往所有v-for迴圈出的元素都會變化。如下面的程式碼：我需要點選到的元素新增一個類樣式，其他元素不變，但是這樣會導致所有的元素都會變化 html: <div v-for = "(item

新增Activity、頁面傳值跳轉和點選按鈕觸發事件『Android系列九』

這篇文章主要是將怎麼新新增頁面和怎麼在兩個頁面之間跳轉，以及怎麼傳值過去。已經知道了頁面配置檔案在layout資料夾下，新建layout/report.xml： <RelativeLayout xmlns:android="htt

糊糊的前端學習筆記——a標籤點選跳轉頁面後，為被點選的a標籤新增樣式【Day1】

本人前端小白一枚，初步接觸前端知識一個月。從今天開始將在部落格上分享一下我每日工作中遇到的一些問題和相應的解決，以幫助自己更好的學習和成長。今天在製作網頁頂部公共導航時，遇到這樣一個問題，我需要在a標籤點選跳轉頁面後，為被點選的a標籤新增樣式。增添樣式如下：.selec

Ztree _ 橫向顯示子節點、點擊文字勾選、去除指定元素input的勾選狀態

.cn hid ttr 很好 clas pre ges tree 效果前些天項目需要樹結構表現數據，需求ztree就能滿足所以直接使用ztree只是踩了些小坑。。。 1.ztree子節點橫向顯示（下圖）：效果說明：第三級子節點按需求橫向顯示其他豎向顯示，每行最多顯示5

AngularJS點選新增樣式、點選變色設定

相關推薦