I've one question. At this time on my page I've :
<table><tr>
<td>...</td>
<td>...</td>
</tr></table>
When my page is resized under 1024px, I would like to hide a
<table><tr>
</tr></table>
What can I add here ->
#media screen and (max-width: 1024px {
...
}
<table id="myTable">
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
#media screen and (max-width: 1024px {
#myTable {display:none;}
}
Related
so I got the table where I display certain data which includes dates and other stuff. What I want is to highlight row where the displayed date is the same as the current day. Table is ordered by the dates. Any idea about this use-case?
This is my code:
<table class="table table-striped" style="font-size:14px; margin-left: 5px;">
<head>
<tr>
<th style="text-align: left;"><data-i18n i18n="_m_f_pen_feeding_start_date_">Feeding date</data-i18n></th>
<th style="text-align: left;"><data-i18n i18n="_m_f_pen_frequency_of_feeding_">Frequency of feeding</data-i18n></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="freq in vm.details.pen_feeding_scheduler_list | orderBy:'-start_feeding_date'">
<td style="min-width: 120px; text-align: left;">{{freq.start_feeding_date | date:'shortDate'}}</td>
<td style="min-width: 120px; text-align: left; display: inline-block;white-space: nowrap">{{freq.feeding_frequency || ('_label_empty_' | i18n)}}</td>
</tr>
</tbody>
</table>
In my controller i set current date as :
vm.current_date = new Date().toISOString().slice(0, 10)
If you need more code, I can provide it. Thanks in advance
Here is fiddle link for a simple example. You can modify it as per your need.
<div ng-class="getClass()">text</div>
Controller:
var myModule = angular.module('app', []);
var current_date = new Date().toISOString().slice(0, 10);
myModule.controller('myCtrl', function ($scope) {
$scope.getClass = function(){
if(current_date == '2020-07-23'){
return 'blue';
}else{
return 'red';
}
}
});
http://jsfiddle.net/5oc3fqzj/
I have a 2-dimensional array.
I am using it as a source to populate an html table using angularjs ng-repeat.
I want to add an icon at the end of each row.
It works on the first two rows, but then the next several rows contain only the icon.
<div ng-app="myApp" ng-controller="tblCtrl">
<table id="tableToFilter" class="w3-table-all w3-small w3-row" ng-cloak>
<tr class="w3-blue w3-mobile">
<th data-row="0" data-col="{{$index}}" ng-repeat="columns in header">{{columns}}</th>
<th></th>
</tr>
<tr class="w3-mobile" ng-show="{{$index > 0}}" ng-repeat="rows in table">
<td data-row="{{$parent.$index}}" data-col="{{$index}}" ng-repeat="columns in rows">{{ columns }}</td>
<td><i class="material-icons editIcon">edit</i></td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('tblCtrl', function($scope) {
$scope.table = datags;
$scope.header = datags[0];
});
</script>
'datags' above is a 2-dimensional array in json.stringify format.
It does not have key/value pairs.
It is 94 rows and 9 columns. I am using css to prevent displaying columns 0,4,7,8 so that my table fits on my screen. (I'm sure there's a cleaner way to do this.)
<style>
td[data-col="0"], th[data-col="0"] {
display: none;
}
td[data-col="4"], th[data-col="4"] {
display: none;
}
td[data-col="7"], th[data-col="7"] {
display: none;
}
td[data-col="8"], th[data-col="8"] {
display: none;
}
</style>
screenshot of my table
What am I doing wrong?
I did figure it out. I think ng-repeat was perceiving the blanks as duplicates. I added track by $index and now it works. <tr class="w3-mobile" ng-show="{{$index > 0}}" ng-repeat="rows in table track by $index"> <td data-row="{{$parent.$index}}" data-col="{{$index}}" ng-repeat="columns in rows track by $index">{{ columns }}</td> <td><i class="material-icons editIcon">edit</i></td> </tr>
I want when click on switchery button the loading screen appear or modal and this loading screen or modal will dismiss only when http request completed and get all data.In short when click on switch then user cannot perform any action and cannot click on other buttons.so how can i do this.I'm using angular with laravel 5.2
<div class="table-responsive">
<table class="table table-hover ">
<thead>
<tr>
<th>Device Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="device in devices">
<td>[[device.device_name]]</td>
<td>
<switch id="enabled" name="enabled" on="ON" off="OFF"
ng-init="enabled=device.status" ng-model="enabled" class="green "
ng-change="changeStatus([[device.device_id]],[[device.user_id]],enabled)"
></switch>
</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
Angular file
myapp.controller('AutomationController',function(dataFactory,$scope){
$scope.devices;
$scope.userId=null;
loadDevices();
function loadDevices()
{
dataFactory.httpRequest('/user_devices').then(function (data) {
console.log(data);
$scope.devices=data;
})
}
$scope.changeStatus=function($device_id,$user_id,$status){
if($status)
{
$status=1;
}
else {
$status=0;
}
dataFactory.httpRequest('/device_status/'+$device_id,'PUT',{},
{"user_id":$scope.userId,
"status":$status
}).then(function(data) {
});
}
});
Before making your $http request, set $scope.loading = true; and in your promise's finally(function(){}); set $scope.loading = false;
In your HTML template, add something like <div class="modal loading" ng-if="loading">Loading...</div>. Use CSS to make it take up whole screen and have higher z-index so it blocks clicks on the rest of UI.
how to highlight a table row using angularjs. i tried in the following way but it is highlighting all rows.
I have a table in the following way,
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tbody data-ng-repeat="transaction in transactionsgroup">
<tr data-ng-click="rowHighilited($index)" data-ng-repeat="txns in transaction.transactions" data-ng-class='{selected: $index==selectedRow}'>
<td>xxxxxx</td>
<td>xxxxxx</td>
</tr>
</tbody>
</table>
controller,
$scope.rowHighilited = function(row){
$scope.selectedRow = row;
};
Is this what you are looking for ? I had to guess some mock data and also the selection behavior.
Feel free to ask for more details if this solution suites you well.
function TestCtrl($scope){
$scope.rowHighilited = function(group, row){
$scope.selectedGroup= group;
$scope.selectedRow = row;
};
$scope.transactionsGroups=[
{transactions:['test1','test2','test3']},
{transactions:['test1','test2']},
{transactions:['test1','test2']},
]
}
.selected{
background:black;
color:white;
}
/* The following just makes the tbody tags spaced up,
see http://stackoverflow.com/questions/294885/how-to-put-spacing-between-tbody-elements for details */
table {
border-collapse: collapse;
width:100%;
max-width:300px;
}
table tbody {
border-top: 30px solid white;
}
td,th{width:50%; text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestCtrl">
<pre ng-bind="{{transactionsgroups}}"></pre>
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tbody
ng-repeat="transactionGroup in transactionsGroups"
ng-init="groupIndex=$index"
>
<tr
ng-repeat="transaction in transactionGroup.transactions"
ng-init="transactionIndex=$index"
ng-click="rowHighilited(groupIndex, transactionIndex)"
ng-class="groupIndex==selectedGroup && transactionIndex==selectedRow?'selected':''">
<td>transaction:</td>
<td>{{transaction}}</td>
</tr>
</tbody>
</table>
</div>
<div ng-app="myApp">
<div ng-controller="startCtrl">
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tbody data-ng-repeat="transaction in transactionsgroup">
<tr ng-class="{active:$index==selectedRow}" data-ng-click="rowHighilited($index)" data-ng-repeat="txns in transaction.transactions">
<td>{{txns.id}}</td>
<td>{{txns.trasactionName}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Your Controller.
var app=angular.module("myApp",[]);
app.controller("startCtrl",function($scope){
$scope.transactionsgroup=[
{id:1,
transactions:
[{id:1,trasactionName:"a"},
{id:2,trasactionName:"b"},
{id:3,trasactionName:"c"}
]}
];
$scope.rowHighilited=function(row)
{
$scope.selectedRow = row;
}
});
Your .css
.active{
background:yellow;
border:1px solid;
}
Working Fiddle Link
http://jsfiddle.net/Lk4me2xp/1/
This is my custom easy solution.
i tried in the following way but it is highlighting all rows
It's because you are setting common scope property which is shared by all rows. You should set selectedRow in the scope of the individual clicked row. You can refer row child scope with this inside ngClick:
$scope.rowHighilited = function(row) {
this.selectedRow = true;
// or if you also want to unselect on the second click
// this.selectedRow = !this.selectedRow;
};
and then:
data-ng-class='{selected: txns.selectedRow}'
Thanks to the answer to this question, I don't get a JavaScript error when AngularJS gets a 401 error back from AJAX since I replaced ng-show with ng-if.
However, even with ng-if, when AJAX returns a 401 error and the hasNoAccess div is displayed, I notice that when the page loads, the hasAccess div blinks quickly on the screen and then disappears.
How can I get the hasAccess div to stop displaying for a split second on page load when its ng-if condition is false?
ADDENDUM: I can put a style="display:none" in the hasAccess div, which solves the problem, but then, when the ng-if if true, it doesn't display the div at all.
EDIT: Added ng-cloak to the hasAccess element, but it still blinks.
<div class="pageContent">
<h2>Showcase AngularJS 4: Interactivity with Bootstrap</h2>
<div ng-app="mainApp">
<div ng-controller="projectManagerController">
<div class="projectManagerContainer">
<div ng-cloak class="hasAccess" ng-if="projectManagers != '[noAccess]'">
<div class="projectManagerArea">
<h3>Project Managers</h3>
<table class="table table-striped table-bordered">
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="projectManager in projectManagers| orderBy: 'surname'">
<td class="text-right">{{projectManager.id}}</td>
<td>{{projectManager.givenname}}</td>
<td>{{projectManager.surname}}</td>
</tr>
</table>
<button class="btn btn-success">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</div>
</div>
<div class="hasNoAccess" ng-if="projectManagers == '[noAccess]'">
<div class="alert alert-warning">No access to project managers.</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('mainApp', []);
app.controller('projectManagerController', function ($scope, $http) {
$scope.message = 'Here are the project managers:';
$http.get("<?= qsys::getFullUrl("task/showcaseAngularjs3") ?>")
.success(function (response) {
$scope.projectManagers = response;
})
.error(function (error) {
$scope.projectManagers = '[noAccess]';
});
});
</script>
<style type="text/css" scoped>
.pageContent {
margin: 10px;
}
.projectManagerContainer {
width: 500px;
}
.projectManagerArea {
border: 1px solid #ddd;
background-color: #eee;
padding: 20px;
border-radius: 5px;
}
.projectManagerArea h3 {
font-size: 22px;
margin: 0 0 10px 0;
}
</style>