AngularJS-da ng-repeat yordamida ma'lum bir ‹tr› uchun fon rangini qanday o'zgartirish mumkin

Qanday qilib har bir qator uchun boshqa fon rangini o'rnatishim mumkin? Misol uchun:

1-qator: ko'k

2-qator: qizil

3-qator: yashil

main.js

$scope.names = [
        {fName: "John", lName: "David"},
        {fName: "Richard", lName: "Daniel"},
        {fName: "Paul", lName: "Mark"}
        ];

test.html

<table class="table table-bordered">
  <tbody><tr ng-repeat="name in names">
    <td>{{name.fName}}</td>
    <td>{{name.lName}}</td>
  </tr></tbody>
</table>

javascript html css angularjs
person Elvira Emm    schedule 20.10.2015    source manba
comment
Men faqat ma'lum bir qator uchun ma'lum bir fon rangini o'rnatmoqchiman. Agar menda 10 qatorli jadval bo'lsa, masalan, 6-raqamli qator uchun fon rangini o'rnatishni xohlayman.   -  person Elvira Emm    schedule 20.10.2015
comment
Ranglar uchun qofiya yoki sabab bo'ladimi? Rangni nomga bog'lay olasizmi?   -  person hungerstar    schedule 20.10.2015
comment
rang bermoqchi bo'lgan qatorni, uning o'rnini yoki ..ni nima aniqlaydi?   -  person TimCodes    schedule 20.10.2015
comment
Bir oz jQuery haqida o'ylaysizmi?   -  person An0nC0d3r    schedule 20.10.2015
comment
Agar iloji bo'lsa, buni Angular'da qilishni xohlayman.   -  person Elvira Emm    schedule 20.10.2015
comment
ng-klassidan foydalanishingiz mumkin   -  person TimCodes    schedule 21.10.2015
comment
lekin fon rangini o'zgartirish uchun qatorni belgilaydigan shart nima? Bu jadvaldagi uchinchi qator yoki fname = roger bo'lgan qator. bayroq nima   -  person TimCodes    schedule 21.10.2015
comment
Agar jadvalning uchinchi qatori bo'lsa, men fon rangi boshqacha bo'lishini xohlayman.   -  person Elvira Emm    schedule 21.10.2015
comment
@Michaelning javobini ko'ring, shunchaki 1 dan uchtaga o'zgartiring   -  person TimCodes    schedule 21.10.2015
comment
ng-class va $index bilan siz bunga osongina erishishingiz mumkin.   -  person Michael P. Bazos    schedule 21.10.2015
comment
@TimCodes Deyarli, uchinchi qatorning indeksi 2 ;)   -  person Michael P. Bazos    schedule 21.10.2015
comment
@Michael, lol, yaxshi ushlash   -  person TimCodes    schedule 21.10.2015

Javoblar (3)


arrow_upward
4
arrow_downward

Har bir qator uchun boshqa rangni xohlasangiz, ngStyle dan foydalanishingiz mumkin

<tr ng-repeat="name in names" ng-style="{'background-color': colors[$index]}">

kontrolleringiz $scope.colors = ['blue','red', 'green'] ko'rsatgan joyda

or 

<tr ng-repeat="name in names" ng-class="colors[$index]">

va har birini uslublar jadvalingizga qo'shing

.blue { background-color: blue }
person TheBreakthrough    schedule 20.10.2015
comment
Javobingiz uchun rahmat! - person Elvira Emm; 21.10.2015
comment
Ammo bir nechta qatorlar uchun bir xil rangni xohlasam nima bo'ladi. Birinchi qatorni va oxirgi qatorni aytaylik. Men $scope.colors = ['blue', ' ', 'blue'] dan foydalanishim kerakmi? Menimcha, buning uchun boshqacha yondashuv bo'lishi kerak. - person Elvira Emm; 21.10.2015
comment
@ElviraEmm Keyin Mayklning yondashuvi $first va $last indeks usullaridan foydalangan holda yaxshiroq bo'lishi mumkin. - person TheBreakthrough; 21.10.2015

arrow_upward
3
arrow_downward

Mana burchak bilan misol:

Shablon:

<tr ng-repeat="name in names" ng-class="{greenyellow: $index === 1}">
    <td>{{name.fName}}</td>
    <td>{{name.lName}}</td>
</tr>

CSS

.greenyellow {
    background-color: greenyellow;
}

Bu ikkinchi qatorni $index nolga asoslangan sifatida uslublaydi.

skripka demo

person Michael P. Bazos    schedule 20.10.2015
comment
Men bu demo ishlayotganini skripkada ko'rishim mumkin. Lekin mening loyihamda yo'q. Muammo qayerda ekanligini aniqlash uchun batafsilroq ko'rib chiqaman. Javoblaringiz uchun rahmat! - person Elvira Emm; 21.10.2015
comment
Muammo kutubxonada edi. Menda 1.0.4 versiyasi bor edi. 1.3.15 ga o'zgartirildi va hozir yaxshi ishlaydi! - person Elvira Emm; 21.10.2015
comment
1.0.4 eski :) Bugungi eng so'nggi barqaror versiya 1.4.7. Yangilanish haqiqatan ham xush kelibsiz! - person Michael P. Bazos; 21.10.2015
comment
ng-repeat kontekstida ba'zi maxsus o'zgaruvchilar mavjud: $index teng joriy satr indeksi, shuningdek, $first yoki $last, agar joriy satr birinchi bo'lsa (javob. oxirgi) bo'lsa rost ga teng yoki aks holda noto'g'ri. - person Michael P. Bazos; 21.10.2015
comment
Misol: ng-class="{green: $first, blue: $index === 2 || $last}" birinchi qatorga green sinfini qo'shadi. blue klassi uchinchiva oxirgi qator uchun ham bo'ladi. Umid qilamanki, bu aniq. - person Michael P. Bazos; 21.10.2015
comment
Agar menda 20 qatorli jadval bo'lsa va men 1, 5, 7, 14, 19 qatorlar uchun bir xil fon rangini o'rnatmoqchi bo'lsam. Indeksga rangni qaerga qo'yish kerakligini aytishning bir usuli bormi? - person Elvira Emm; 21.10.2015
comment
Keyin siz qamrovga bog'langan ob'ektga xususiyat qo'shishni ko'rib chiqishingiz mumkin, bu sizga qaysi sinfni qo'llash kerakligini (agar mavjud bo'lsa) beradi. Yoki indeksni kirish parametri sifatida qabul qiluvchi getColor funksiyasini yarating. - person Michael P. Bazos; 21.10.2015
comment
Salomat bo'ling. Bu savolni hal qilingan deb belgilashni o'ylab ko'ring va agar sizda boshqalar bo'lsa, boshqasini ochishdan tortinmang. - person Michael P. Bazos; 21.10.2015

arrow_upward
-1
arrow_downward

Quyidagi kod tanlangan qatorni ta'kidlash uchun ishlatiladi.

<tr ng-repeat="orderList in orderDetailList track by $index"   ng-style="{'background-color': colors[$index]}">

Tekshirish moslamasida e'lon qiling

app.controller("OrderListController",function($scope){
    $scope.colors=[];
    /* call the below function on ng-click
    $scope.addtoship = function(){
        $scope.colors.push(['pink']);
    }
}

HTML

<td>
    <button type="button" data-ng-click="addtoship()"> Add to Ship </button>
</td>
person Ravikumar Kalimuthuswamy    schedule 22.01.2018