Search Posts

Category: html-table

Nested ng-repeat in AngularJS

I have the following JSON: { “ListNhomThanhTra”: [ { “ListKeHoachThanhTra”: [ { “ListDoiTuong”: [ { “MA_DV_DUOC_TT”: “DT01”, “TEN_DOITUONG”: “Tỉnh Bắc Ninh”, “stt”: 1.1 } ], “MA_DM_KEHOACH_TT”: “KH13072018003”, “TEN_KEHOACH”: “Kế hoạch chính thức”, “stt”: 1 } ], “MA_NHOM_TT”: “010”, “TEN_NHOM”: “Thanh tra ngân sách địa phương”, “stt”: “I” }, { “ListKeHoachThanhTra”: [ { “ListDoiTuong”: [ { “MA_DV_DUOC_TT”: “DT01”, “TEN_DOITUONG”: “Tỉnh Bắc Ninh”, “stt”: 1.1 } ], “MA_DM_KEHOACH_TT”: “KH13072018003”, “TEN_KEHOACH”: “Kế hoạch chính thức”, “stt”: 1 } […]

Trying to populate html table with ng-repeat using two different arrays

I am having some issues trying to populate a table with two arrays. I am trying to achieve the following output: I have an array called students and within each student object, I have a courses array. I am trying to populate my table using ng-repeat to show all courses against each student. Not all data is given within each course, meaning that if a student hasn’t started a course then it won’t appear in […]

Angular ng-repeat with ng-if not working on tr tag

In the below Div i am using ng-repeat across some data to populate a list. while doing this i would like to NOT have a a certain TR tag created if it fits a certain requirement by using the ng-if directive on x.Equipment_Cost_Child != 0 However regardless of the expression I can’t get the ng-if to work properly. How can i get it to only show the TR if x.Equipment_Cost_Child > 0 ? I have […]

Rowspan with AngularJs

I need some help with ng-repeat of angularJs. I’m trying to render a table using colspan with the following json: var json = { “actorActress”:[ { “name”:”Angelina Jolie”, “age”:45, “rowspan”:2 }, { “name”:”Brad Pitt”, “age”:48, “rowspan”:3 } ], “Films”:[ { “film”:”Mr & Mrs Smith”, “other_info”:”info1″ }, { “film”:”Tomb Raider”, “other_info”:”info2″ }, { “film”:”Troy”, “other_info”:”info1″ }, { “film”:”Mr & Mrs Smith”, “other_info”:”info2″ }, { “film”:”Fight Club”, “other_info”:”info1″ } ] } And this is the table that […]

AngularJS creating new table foreach result property

I don’t know how to word this issue properly as English being my second language but essentially I am trying to create new table forEach results property in the array. Here is what my response from API looks like. response.providerResults = [ “totalHits”:49934, “results”:[ { “title”:”Apple Bans Cryptocurrency Mining on iPhone and iPad”, “summary”:”Apple Bans Cryptocurrency Mining on iPhone and iPadnIndo-Asian News …Servicen, 12 June 2018nThe iPhone maker Apple has introduced a…”, “sourceName”:”SocialGist”, “url”:”″, “date”:”201806121009″, […]

Issues with Bootstrap table with collapsible rows

I created a Bootstrap table and would like to have collapsible rows to show some additional information, but can’t seem to get it to work. My code looks like this: <div ng-if=”! && c.list.length>0″ class=”list-group” style=”max-height: none; overflow-y: auto;”> <table class=”table table-striped table-hover”> <thead> <tr> <th></th> <th>Work Type</th> <th>Work Name</th> <th>From</th> <th>To</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat=”item in c.list track by $index” ng-if=”$index >= data.window_start && $index < data.window_end”> <td style=”vertical-align: middle;”> <div href=”#{{item.sys_id}}” […]

rowspan for 3 columns using angularJS

I have a category list that contains name and subject list. The subject list contains name and course list. The course list contain name. I want to display this data in table that will rowspan category or subject if they are the same. For example: Category Subject Course cat1 sub1 ” sub2 cour1 cour2 sub3 ” cat3 ” Currently I have it working for two columns using this: <table class=”curvetable5″ style=”width:99%”> <thead> <tr> <th width=”30%”>Category</th> […]

How to add Focus to a table row <tr>?

I have a table generated with AngularJS. Here’s my HTML: <table class=”my_table”> <thead> <tr> <th>Name</th> <th>Address</th> <th>Celphone</th> </tr> </thead> <tbody> <tr ng-repeat=”contact in contacts”> <td>{{contact.Name}}</td> <td>{{contact.Address}}</td> <td>{{contact.Celphone}}</td> </tr> </tbody> </table> I want each row to change color when “hover” and a different color when “clicked”, so I tried this with CSS: <style> .my_table tbody tr:hover { background-color: #7fccee; /*— this is a blue color when hover —*/ } .my_table tbody tr:focus { background-color: #f3f3f3; /*— […]

Filter does not show a message instead of a table if the filtering returns empty result

Having a table with data on it and a selector which must filter the data based on a selection made in a selector, I want to show a message (“No data”) if the filtering returns no data. The selector looks like this: <select ng-model=”$ctrl.type”> <option value=””>All</option> <option value=”1″>1</option> <option value=”2″>2</option> <option value=”3″>3</option> </select> table is generated here: <tbody> <tr ng-repeat=”rows in $ctrl.myData | filter: {Type: $ctrl.type} track by $index”> <td> <span>{{rows.Type}}</span> </td> <td> <span>…</span> </td> […]

Next Page »