I have a table and using ng-repeat to bind my cells with the data. One cell has edit, save, delete icons. If an order has been posted then the delete/ save icons should be disabled and the icons also should be a different color. I am able to disable the click event of the delete/save icons but can not figure out how to change the css class. With this code the save and delete can not be clicked. I'd like to turn them light gray or some obviously different color.
Here is the HTML:
<tbody>
<tr ng-repeat="order in vm.orders track by $index" ng-dblclick="vm.editOrder(order)" style="cursor:pointer" ng-class="{'class':order.invoiceStatus, 'disabled-order': !order.invoiceStatus}">
<td ng-bind="(order.dtInvoiced | date:'MM/dd/yyyy' )"> </td>
<td ng-bind="order.invoiceNumber"></td>
<td ng-bind="order.invoiceItems.mdbsPoNumber"></td>
<td align="center" ng-bind="order.lines"></td>
<td ng-bind="(order.total | number:2)"></td>
<td align="center" ng-bind="order.carrier"></td>
<td>
<a ng-click="vm.editOrder(order)"><i class="fa fa-pencil fa-2x"></i></a>
<a ng-click="order.disabledToggle || vm.saveOrder(order)"><i class="fa fa-check fa-2x"></i></a>
<a ng-click="order.disabledToggle || vm.removeOrder(order)"><i class="fa fa-trash fa-2x link-icon"></i></a>
</td>
</tr>
</tbody>
Here is the JS to disable the click event of save and delete icons:
function orderItems() {
var orders;
if (vm.Criteria != null) {
orderService.getOrderData(vm.Criteria)
.then(function (result) {
vm.data = result.data;
orders = vm.data;
for (var i = 0; i < vm.data.length; i++) {
orders[i].disabledToggle = false;
if (orders[i].invoiceStatus == "RCV") {
orders[i].disabledToggle = true;
}
else {
orders[i].disabledToggle = false;
}
vm.orders.push(orders[i]);
}
});
}
}
I've also tried in the icon:
<i ng-class="order.invoiceStatus = order.disabledToggle ? 'disabled-order class' : 'class' "></i>
You can use ng-class to evaluate a variable for true. If the variable is true then a class selector will be injected into the element:
<a ng-click="order.disabledToggle || vm.saveOrder(order)"><i ng-class="{ 'cssCheckDisabled': jsCheckDisabled } class="fa fa-check fa-2x"></i></a>
In this case we are evaluating jsCheckDisabled. Once it is try the cssCheckDisabled class selector is injected into the element.
Then is as easy as making a class selector in your CSS to do what you want:
cssCheckDisabled {
color: red;
}
Related
I have a Blazor page with a child component(displays addresses). The child component displays a table and the last column displays a button with #oncclick to execute a method (ie: UpdateAddress(??)). When clicking the button, I need to pass in the row index the button was created on or Entid variable from the row into the #onclick method. How can I get either of those values to pass to the method? I know normally you would use a href with the button but the child component does not use a #page link. Thanks
#for (int i = 0; i < Arae.EntAddModelsList.Count(); i++)
{
<tr>
<td><input type="checkbox" checked="#Arae.EntAddModelsList[i].Prim" onclick="return false" class="text-success"></td>
<td>#Arae.EntAddModelsList[i].Label</td>
<td>#Arae.EntAddModelsList[i].Add1</td>
<td>#Arae.EntAddModelsList[i].EffBegDate.ToString("MM/dd/yyyy")</td>
<a id="#i" class="btn btn-primary table-btn" #onclick="#(() => UpdateAddress(i))">
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
}
}
Thanks :)
I would avoid using an array:
Use a #key on each row.
Note: I did not know the type of EntAddModelsList so I used object. Change this to the item type.
#foreach (var entAddModel in Arae.EntAddModelsList)
{
<tr #key="entAddModel">
...
<td>#entAddModel.Label</td> // more concise than Arae.EntAddModelsList[i].Label
...
<button class="btn btn-primary table-btn" #onclick="#(() => UpdateAddress(entAddModel))">
<i class="fas fa-edit"></i>
</button>
</tr>
}
#code {
async ValueTask UpdateAddress(object entAddModel) // Change object to the correct type
{
...
}
}
Side Note:
To bind to a checkbox use something like this:
<input type="checkbox" checked #bind="entAddModel.Prim">
first off, you must define a local varaible in your loop like this:
#for (int i = 0; i < Arae.EntAddModelsList.Count(); i++)
{
var local = i;
}
And use it instead of i in the lambda expression;
As for your question:
define your anchor element like this:
<a href="" id="#i" class="btn btn-primary table-btn" #onclick="#(() =>
UpdateAddress(local))">
<i class="fas fa-edit"></i>
</a>
And in the #code block add the following:
private Task UpdateAddress(int i)
{
}
I have a code inside ng-repeat
<tr ng-repeat="location in assetLocations track">
<span class="fa fa-remove fa-lg text-danger" style="cursor: pointer;"
ng-show="location.isEdit"
ng-click="readOnly===false ? (cancel();location.isEdit = false; updateClicked = false;) : null"></span>
</tr>
Here location.isEdit property is set on the fly.
I want to set a conditional ng-click to span. But the code above gives the following error
angular.js:11598 Error: [$parse:syntax] Syntax Error: Token ';' is unexpected, >>expecting [)] at column 29 of the expression [readOnly===false ? >>(cancel();location.isEdit = false; updateClicked = false;) : null] starting at >>[;location.isEdit = false; updateClicked = false;) : null].
I can set the variables inside the function, but I need to set the variables and call the functions on ng-click
How to use the conditional ng-click for this type of scenario?
You can try something like the below code,
Controller:
$scope.conditionCancelClick = function(location){
if(!$scope.readOnly){
$scope.cancel();
location.isEdit = false;
$scope.updateClicked = false;
}
}
Template:
<tr ng-repeat="location in assetLocations track">
<span class="fa fa-remove fa-lg text-danger" style="cursor: pointer;"
ng-show="location.isEdit" ng-click="conditionCancelClick(location)"></span>
</tr>
try replacing ; to , as
<tr ng-repeat="location in assetLocations track">
<span class="fa fa-remove fa-lg text-danger" style="cursor: pointer;"
ng-show="location.isEdit"
ng-click="readOnly===false ? (cancel(),location.isEdit
= false, updateClicked = false) : null"></span>
</tr>
I have a html page that contains a table with date, staffID and shift. Shift has a value of 0 (morning) or 1 (afternoon). It is generated as follows:
function staffSchedule ($scope, $http) {
$http
.get('/api/schedule/2017/02')
.then(function(response) {
var data = response.data;
$scope.shifts = data;
console.log(data);
})
.catch(function(errorResponse) {
console.log('Error: ' + errorResponse.status);
});
}
<table>
<tr>
<th>Date</th>
<th>StaffID</th>
<th>Shift</th>
</tr>
<tbody ng-repeat="shift in shifts">
<tr>
<td>{{shift.staffid}}</td>
<td>{{shift.date}}</td>
<td>{{shift.type}}</td>
</tr>
</tbody>
</table>
The code returns the data as it should do but I want to extend it to do something more.
I want the code to dynamically substitute the 0 for Fontawesome sun <i class="fa fa-sun-o" aria-hidden="true"></i> and 1 for Fontawesome moon <i class="fa fa-moon-o" aria-hidden="true"></i>. Any idea how I can do this with my current setup please?
Here is what I did in my code to get it to work.
<td>
<i class="fa" ng-class="{'fa-hourglass-start':schedule.shift==0,
'fa-hourglass-end':schedule.shift==1}">
</i>
</td>
To explain:
Grab my icons from font awesome http://fontawesome.io/
ng-repeat receives requests from a RESTful call via AngularJS
one of the fields in the record returns '0' or '1' (always; required field)
Use fa-hourglass-start if 0 and fa-hourglas-end if 1.
Use ng-class.
Something like:
<td>
<i class="fa" ng-class="{'fa-sun':shift.type==0,'fa-moon':shift.type==1}"></i>
</td>
Note I did not verify the proper FA class names
The picture shows an edit page, which use can add commands to the list, delete and so on. The value should be only updated to the actual array when user click update button. Below are some of my code:
$scope.editSchedule = function(index){
console.log(index);
$scope.editScheduleValue = {
name: $scope.currentSchedule[index].name,
trigger: $scope.currentSchedule[index].trigger,
repeat: $scope.currentSchedule[index].repeat,
commandList: $scope.currentSchedule[index].commandList,
scheduleIndex: index
};
var dailog = $uibModal.open({
templateUrl: 'app/partials/edit-schedule.html',
controller: editScheduleController,
size: 'lg',
scope: $scope
});
};
This is a edit button scope, which will get the actual value from curremtSchedule array.
$scope.addCommand = function(){
console.log("addCommand");
$scope.addRoom = $scope.equipment[$scope.roomSelected].name;
$scope.addEquipment = $scope.equipment[$scope.roomSelected].equipment[$scope.equipmentSelected].name;
$scope.addEquipmentCommand = $scope.equipment[$scope.roomSelected].equipment[$scope.equipmentSelected].command[$scope.commandSelected].type;
$scope.editScheduleValue.commandList.push({
room: $scope.addRoom,
equipment: $scope.addEquipment,
command: $scope.addEquipmentCommand
})
};
This is my Add command button code, which push data to editScheduleValue array.
HTML:
<tr ng-repeat="x in editScheduleValue.commandList" ui-tree-node>
<td style="width: 5%"><i class="glyphicon glyphicon-resize-vertical" ui-tree-handle></i> </td>
<td style="width: 5%">{{$index+1}}</td>
<td style="width: 30%">{{x.room}}</td>
<td style="width: 30%">{{x.equipment}}</td>
<td style="width: 30%">{{x.command}}</td>
<td>
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)">
<span class="glyphicon glyphicon-remove"></span>
</a>
</td>
</tr>
The problem that I encouter is whenever I delete, add command not only the editScheduleValue array updated, but the currentSchedule array as well, I really do not understand why is this 2 array is somehow linked. Please help~~~
Thank you.
I replace
commandList: $scope.currentSchedule[index].commandList,
With
commandList: angular.copy($scope.currentSchedule[index].commandList),
and this 2 arrays are not link anymore, I do not quite understand why it is, but here the answer for my problem.
is there any way to insert additional row in ng-repeat ? Here is the problem.
<tr data-ng-repeat="user in content |pagination: currentPage*limit| limitTo: limit | filter: searchText ">
<td>{{user.imie}}</td>
<td>{{user.nazwisko}}</td>
<td>{{user.data_urodzenia}}</td>
<td>{{user.imie2}}</td>
<td>{{user.imie}}</td>
<td>{{user.imie}}</td>
<td><i ng-click="showDetails()" class="fa fa-plus-square" aria-hidden="true"></i></td>
</tr>
I have this table with repeating. In last cell there is a button that will trigger function to show more details of user. So what i need is, an additional row inserted under presented row.
<tr ng-repeat...></tr>
<tr ng-show="details">additional data row</tr>
and the controller
$scope.details = false;
$scope.showDetails = function(){
if (!details) {
$scope.details = true;
}
else {
$scope.details = false
}
}
Any way to do this ? Tried few approaches and didn't worked out.
You can either put the ng-repeat on the tbody, which will likely cause some issues with styling.
Or you can use ng-repeat-start/end. As of angular 1.2, you can repeat over elements which is pretty cool - to do this you can;
<tr ng-repeat-start="user in content |pagination: currentPage*limit| limitTo: limit | filter: searchText ">
<td>{{user.imie}}</td>
<td>{{user.nazwisko}}</td>
<td>{{user.data_urodzenia}}</td>
<td>{{user.imie2}}</td>
<td>{{user.imie}}</td>
<td>{{user.imie}}</td>
<td><i ng-click="showDetails()" class="fa fa-plus-square" aria-hidden="true"></i></td>
</tr>
<tr ng-repeat-end ng-show="details">additional data row</tr>
More information here.
Hope it helps!
Use your ng-repeat in tbody tag, then you can use your additional row on a new tr tag
like this below way
<tbody data-ng-repeat="user in content |pagination: currentPage*limit| limitTo: limit | filter: searchText ">
<tr>
<td>{{user.imie}}</td>
<td>{{user.nazwisko}}</td>
<td>{{user.data_urodzenia}}</td>
<td>{{user.imie2}}</td>
<td>{{user.imie}}</td>
<td>{{user.imie}}</td>
<td><i ng-click="showDetails()" class="fa fa-plus-square" aria-hidden="true"></i></td>
</tr>
<tr>
// your additional row
</tr>
</tbody>
And one more thing, Your code is totally wrong
$scope.details = false;
$scope.showDetails = function(){
if (!details) {
$scope.details = true;
}
else {
$scope.details = false
}
}
this above code will open all row, not particular row. So you need maintain with this by Array of $index