I want to change background color according to status.
If it's active then it should be green.
<td id="txtSuppStatus"><c:out value="${dashSupList.supplierStatus }"/></td>
<script type="text/javascript">
function checkFilled()
{
var supplierStatus = document.getElementById("txtSuppStatus");
if(supplierStatus == "Active")
{
supplierStatus.style.backgroundColor = "green";
}
else
{
document.getElementById('txtSuppStatus').setAttribute( "class", "label label-danger label-mini" );
}
}
</script>
Yes i got the answer.
<c:choose>
<c:when test="${dashMaintenanceList.maintenanceStatus == 'In Progress'}">
<td><c:out value="${dashMaintenanceList.assetTag}"/></td>
<td><c:out value="${dashMaintenanceList.maintenanceType}"/></td>
<td><span class="label label-info"><c:out value="${dashMaintenanceList.maintenanceStatus}" /></span></td>
</c:when>
<c:when test="${dashMaintenanceList.maintenanceStatus == 'Repaired'}">
<td><c:out value="${dashMaintenanceList.assetTag}"/></td>
<td><c:out value="${dashMaintenanceList.maintenanceType}"/></td>
<td><span class="label label-success label-mini"><c:out value="${dashMaintenanceList.maintenanceStatus}" /></span></td>
</c:when>
<c:when test="${dashMaintenanceList.maintenanceStatus == 'To be initiated'}">
<td><c:out value="${dashMaintenanceList.assetTag}"/></td>
<td><c:out value="${dashMaintenanceList.maintenanceType}"/></td>
<td><span class="label label-primary"><c:out value="${dashMaintenanceList.maintenanceStatus}" /></span></td>
</c:when>
</c:choose>
</c:forEach>
Related
I have a problem with show/hide column in a table with ng-repeat after checking a condition. Here is my code.
<div class="row">
<div class="col-md-12 col-no-pad-mob">
<div class="content-box-with-label without-label with-data-view">
<table class="table table-striped table-bordered table-hover table-responsive table-data-view">
<tr>
<th> </th>
<th>Fee Type</th>
<th>Fee</th>
<th class="th_DSCR_Cal">Capitalize</th>
<th class="th_DSCR_Cal">Amortize</th>
<th>Amortized Interest</th>
<th>Recurring Fee</th>
<th class="boo-tbl-tr-config">Setting</th>
</tr>
<tr ng-repeat="amo in item.trialCalculation.listTrialAmortization | filter:{active: true}">
<td class="boo-tbl-tr-config">
<md-checkbox ng-model="amo.isApply" ng-change="GenerateFee_ChangeEvent(item.trialCalculation.listTrialAmortization,amo, item)" aria-label="Checkbox 1" ng-value="amo.isApply" ng-disabled="statusMatched == true"></md-checkbox>
</td>
<td>
{{amo.feeType}}
</td>
<td>
<input class="form-control" step=".01" ng-model="amo.fee" ng-readonly="statusMatched == true || amo.feeType ==='Stamp Duty'|| amo.feeType ==='Document Fee'|| amo.feeType ==='Introducer Fee'|| amo.feeType ==='Insurance Fee'" ng-disabled="amo.isApply === false"
ng-pattern="/[0-9.,]+/" format="number" type="text" ng-change="ResetAmortization_ChangeEvent(item.trialCalculation.listTrialAmortization,amo, item)">
</td>
<td class="boo-tbl-tr-config">
<md-checkbox ng-model="amo.capitalize" ng-change="ValidateCapitalize_ChangeEvent(item.trialCalculation.listTrialAmortization,amo)" aria-label="Checkbox 1" ng-disabled="statusMatched == true || amo.isApply == false || amo.isCapitalizeEnable == false || amo.amortize == true"></md-checkbox>
</td>
<td class="boo-tbl-tr-config">
<md-checkbox ng-model="amo.amortize" ng-change="GenerateAmortization_ChangeEvent(item.trialCalculation.listTrialAmortization,amo, item)" aria-label="Checkbox 1" ng-value="amo.amortize" ng-disabled="statusMatched == true || amo.isApply == false || amo.isAmortizeEnable == false || amo.capitalize == true"></md-checkbox>
</td>
<td>
<input class="form-control" step=".01" ng-model="amo.amortizedInterest" ng-disabled
ng-pattern="/[0-9.,]+/" format="number" type="text" ng-readonly="true">
</td>
<td>
<input class="form-control" step=".01" ng-model="amo.recurringFee" ng-disabled
ng-pattern="/[0-9.,]+/" format="number" type="text" ng-readonly="true">
</td>
<td ng-hide="statusMatched == true" class="boo-tbl-tr-config">
<a href="#" ng-show="cprinit.editable==true && (amo.isCapitalizeEnable==false || amo.amortize==true)"
ng-click="GenerateAmortization_ChangeEvent(item.trialCalculation.listTrialAmortization,amo, item)" ng-disabled="amo.isApply === false || amo.amortize === false"><i class="fa fa-refresh" aria-hidden="true"></i></a>
</td>
</tr>
<tr ng-hide="statusMatched == true" class="add_new_expen">
<td colspan="8">
<md-button class="md-fab md-mini md-primary inline-input" data-toggle="modal" data-target="#addincomemodal_{{$index}}">
<md-icon md-svg-src="~/Content/images/add-plus-button.svg"></md-icon>
</md-button>
<label class="label-addnewexpen" data-toggle="modal" data-target="#addincomemodal_{{$index}}">Add New Fee Type</label>
</td>
</tr>
</table>
</div>
</div>
</div>
I need to show settings column if only if all the data rows should be checked a condition and at least one row is passed the condition. If any of data row is not able to pass the condition the settings column should not be shown.
Use a function in your controller to this. Loop through all the rows to check for the condition, set $scope.shColumn = true when the condition is met.
In your HTML.
<th ng-if="shColumn">Settings</th>
In this code, the 'm' is written inside the indexOf function. But no where in the code the value is passed. I am not able to understand how this 'm' deleting the right item in ng-repeat. When i change 'm' to something else it is now working. I am new to AngularJS.
In the main.js file there is removeitem function, i am getting from where the value of 'm' is coming , it has,nt passed from anywhere. I tried removeing 'm' but it doesnt work, it deletes the last item.
var app = angular.module('myApp', []);
app.controller('cont', function($scope) {
$scope.invoice = {
number: 10,
tax: 14,
items: [{
description: "",
quentity: 10,
cost: 300
}],
};
$scope.currency_symbol = [{
name: 'Indian Rupee',
currency: '₹'
},
{
name: 'USD',
currency: '$'
},
{
name: 'Euro',
currency: '€'
}
];
$scope.addItem = function() {
$scope.invoice.items.push([{
description: "description",
quentity: 1,
cost: 1
}]);
}
$scope.removeItem = function(m) {
$scope.invoice.items.splice($scope.invoice.items.indexOf(m), 1);
}
$scope.subTotal = function() {
var total = 0.0;
angular.forEach($scope.invoice.items, function(item, key) {
total += item.quentity * item.cost;
});
return total;
};
$scope.calcuteTax = function() {
return (($scope.subTotal() * $scope.invoice.tax) / 100);
};
$scope.grandTotal = function() {
return ($scope.subTotal() + $scope.calcuteTax());
};
});
<head>
<title>Simple Invoicing - Built with AngularJS </title>
<meta charset='utf-8'>
<meta name="description" content="AngularJS and Angular Code Example for creating Invoices and Invoicing Application">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="cont">
<div class="container" width="800px" id="invoice">
<div class="row">
<div class="col-xs-12 heading">
<strong>Billing System</strong>
</div>
</div>
</div>
<div class="main1">
<div="customer">
<select ng-init="currencySymbol=currency_symbol[0]" ng-model="currencySymbol" ng-options="currency.name+' '+currency.currency for currency in currency_symbol"></select>
</div>
</div>
<div class="main2">
<table border=1 width=100%>
<th></th>
<th>Description</th>
<th>Quantity</th>
<th>Cost{{' '+currencySymbol.currency}}</th>
<th>Total</th>
<tr ng-repeat="item in invoice.items">
<td text-align="center">
<a class="btn" href="" ng-click="removeItem()">
<strong>[x]</strong>
</a>
</td>
<td><input type="text" ng-model="item.description" placeholder="Description"></td>
<td><input type="number" ng-model="item.quentity" placeholder="10"></td>
<td><input type="number" ng-model="item.cost" placeholder="10"></td>
<td placeholder="0">{{item.quentity*item.cost}}</td>
</tr>
<tr>
<td text-align="center"><a class="btn" style="background-color:green;" href ng-click="addItem()">[+]</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td text-align="center"></td>
<td></td>
<td></td>
<td>Sub Total:</td>
<td>
<p>{{subTotal()}}</p>
</td>
</tr>
<tr>
<td text-align="center"></td>
<td></td>
<td></td>
<td>Tax:<input type="number" ng-model="invoice.tax"></td>
<td>
<p>{{calcuteTax()}}</p>
</td>
</tr>
<tr>
<td text-align="center"></td>
<td></td>
<td></td>
<td>Grand Total:</td>
<td>
<p>{{grandTotal()}}</p>
</td>
</tr>
</table>
</div>
</body>
How do i make the code delete the item on which i click ?
Add item as an argument to the removeItem function:
<tr ng-repeat="item in invoice.items">
<td text-align="center">
̶<̶a̶ ̶c̶l̶a̶s̶s̶=̶"̶b̶t̶n̶"̶ ̶h̶r̶e̶f̶=̶"̶"̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶r̶e̶m̶o̶v̶e̶I̶t̶e̶m̶(̶)̶"̶>̶
<a class="btn" href="" ng-click="removeItem(item)">
<strong>[x]</strong>
</a>
</td>
$scope.removeItem = function(m) {
$scope.invoice.items.splice($scope.invoice.items.indexOf(m), 1);
}
I have a table list and loading lazily with pagination - only 5 items at a time. Sorting & pagination working fine,even search also working but only current page. Total list size is 788, When the user clicks the next page another 5 are loaded etc. However I also want to have an option of searching for an item within the full list - not the lazy list.
MY HTML:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" ba-panel ba-panel-title="Requirement Details" ba-panel-class="with-scroll" >
<form class="form-inline">
<div class="form-group">
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form>
<div class="horizontal-scroll">
<div ng-init="reqTableData(1)"> </div>
<table class="table" >
<thead>
<tr class="sortable ">
<th style="width:5%" ng-click="sort('reqID',1)"> ID
<span class="glyphicon sort-icon" ng-show="sortBy=='reqID'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('reqName',1)">Name
<span class="glyphicon sort-icon" ng-show="sortBy=='reqName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:20%" ng-click="sort('description',1)">Description
<span class="glyphicon sort-icon" ng-show="sortBy=='description'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:10%" ng-click="sort('reqType',1)">Type
<span class="glyphicon sort-icon" ng-show="sortBy=='reqType'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('creationTime',1)">Created On
<span class="glyphicon sort-icon" ng-show="sortBy=='creationTime'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:20%" ng-click="sort('status',1)">Status
<span class="glyphicon sort-icon" ng-show="sortBy=='status'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('priority',1)">Priority
<span class="glyphicon sort-icon" ng-show="sortBy=='priority'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('lastModified',1)">Modified On
<span class="glyphicon sort-icon" ng-show="sortBy=='lastModified'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
</tr>
</thead>
<tbody >
<tr dir-paginate="item in reqTableDetails|orderBy:sortBy:reverse|filter:search|itemsPerPage: 5" total-items="reqdata">
<td style="width:5%">{{item.reqID}}</td>
<td style="width:15%" class="trim-info" title="{{item.reqName}}">{{item.reqName|limitTo:10}}{{item.reqName.length>10 ? '...' : ''}}</td>
<td style="width:20%" class="trim-info" title="{{item.description}}">{{item.description|limitTo:25}}{{item.description.length>25 ? '...' : ''}}</td>
<td style="width:10%">{{item.reqType}}</td>
<td style="width:15%">{{item.creationTime | date:'MM/dd/yyyy'}}</td>
<td style="width:20%">{{item.status}}</td>
<td style="width:15%">{{item.priority}}</td>
<td style="width:15%">{{item.lastModified | date:'MM/dd/yyyy'}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls directions-links="true"
boundary-links="true"
on-page-change="reqpageChangedLevel(newPageNumber)"></dir-pagination-controls>
</div>
</div>
</div>
Controller.js
$scope.reqpageChangedLevel=function(pageno){
$rootScope.pageno = pageno;
if($rootScope.domain == null || $rootScope.domain == null || $rootScope.domain == ""){
{
if( $scope.sortBy=="")
{
$scope.reqTableData ($rootScope.pageno) ;
}else
{
$scope.sortedtable($scope.sortBy,$rootScope.pageno,$scope.reverse);
}
}
}
else
{
$scope.level1 = $rootScope.domain ;
$scope.level2 = $rootScope.project ;
$scope.level3 = $rootScope.release ;
if( $scope.sortBy=="")
{
$scope.reqtabledataLevel($scope.level1,$scope.level2,$scope.level3,$rootScope.pageno);
}else
{
$scope.sortedtableLevel($scope.level1,$scope.level2,$scope.level3,$scope.sortBy,$rootScope.pageno,$scope.reverse);
}
}
};
var vm = this;
vm.total_count = 0;
$scope.itemsPerPage = 5;
// Table on-load
$scope.reqTableData = function(start_index){
$scope.index=start_index;
$http.get("./rest/requirementServices/reqTableDetails?&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index).success(function (response) {
$scope.reqTableDetails = response;
}) ;
};
// Table on drop down change with level id
$scope.reqtabledataLevel = function(level1,level2,level3,start_index){
$scope.index = start_index;
$scope.smartTablePageSize = 5;
$http.get("./rest/requirementServices/reqTableDetailsLevel?level1="+level1+"&level2="+level2+"&level3="+level3+"&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index).success(function (response) {
$scope.reqTableDetails = response;
}) ;
}
// Sort function starts here
$scope.sort = function(keyname,start_index){
$scope.sortBy = keyname;
$scope.index=start_index;
$scope.reverse = !$scope.reverse;
if($rootScope.domain == null || $rootScope.domain == null || $rootScope.domain == ""){
$scope.sortedtable ($scope.sortBy,$scope.index,$scope.reverse) ;
}
else
{
$scope.level1 = $rootScope.domain ;
$scope.level2 = $rootScope.project ;
$scope.level3 = $rootScope.release ;
$scope.sortedtableLevel($scope.level1,$scope.level2,$scope.level3,$scope.sortBy,$scope.index,$scope.reverse);
}
};
//Table on-load with sort implementation
$scope.sortedtable =function(sortvalue,start_index,reverse)
{
$scope.column=sortvalue;
$scope.index=start_index;
$scope.order=reverse;
$http.get("./rest/requirementServices/requirementsData?sortvalue="+$scope.column+"&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index+"&reverse="+$scope.order).success(function (response) {
$scope.reqTableDetails = response;
}) ;
}
// Table on drop down change with sort implementation
$scope.sortedtableLevel =function(level1,level2,level3,sortvalue,start_index,reverse)
{
$scope.column=sortvalue;
$scope.index=start_index;
$scope.order=reverse;
$http.get("./rest/requirementServices/requirementsDataLevel?sortvalue="+$scope.column+"&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index+"&reverse="+$scope.order+"&level1="+$scope.level1+"&level2="+$scope.level2+"&level3="+$scope.level3).success(function (response) {
$scope.reqTableDetails = response;
}) ;
}
/* Lazy Load Table Ends Here */
I've tried with code in controller.js but its not working, so that i removed.
How can i keep my list displayed lazily but have the search box filter items from my full list.
I'm figuring out the same issue. To properly test I tried to load elements either in single call or lazy load. In case of lazy loading $filter doesn't work.
First, have a look at my current code:
$scope.disableParticipant = function (memberObj) {
if($scope.memberObj.membertype==1){
return true;
} else if($scope.memberObj.membertype==2 && $scope.program.updatePermission){
return true;
}
return false;
};
<table>
<tbody>
<tr ng-repeat="memberObj in members | orderBy : ['membername'] as resultMem track by memberObj.id">
<td align="middle" title="Add/Remove Participant" class="width40">
<input type="checkbox" ng-disabled="disableParticipant(memberObj)">
</td>
<td>
<$ memberObj.membername $>
</td>
<td>
<input type="checkbox" ng-disabled="(disableParticipant(memberObj) && (program.created_by == memberObj.id))">
</td>
<td>
<input type="checkbox" ng-disabled="(disableParticipant(memberObj) && (program.created_by == memberObj.id))">
</td>
<td>
<input type="checkbox" ng-disabled="(disableParticipant(memberObj) && (program.created_by == memberObj.id))">
</td>
<td>
<input type="checkbox" ng-disabled="(disableParticipant(memberObj) && (program.created_by == memberObj.id))">
</td>
</tr>
</tbody>
</table>
Here I have used 'disableParticipant' function many times. I am searching any way where I do not need to use the function again & again. I supposed that aliasing with the very first use of function should work but it is not working.
<input type="checkbox" ng-disabled="disableParticipant(memberObj) as isDisabled">
& I want it to work like
<td>
<input type="checkbox" ng-disabled="isDisabled && (program.created_by == memberObj.id))">
</td>
It didn't work but if there is any other way around, let me know...
You can use ngInit to assign result of your function to a variable.
<table>
<tbody>
<tr ng-repeat="memberObj in members | orderBy : ['membername'] as resultMem track by memberObj.id"
ng-init="isDisabled = (disableParticipant(memberObj) && (program.created_by == memberObj.id))">
<td align="middle" title="Add/Remove Participant" class="width40">
<input type="checkbox" ng-disabled="disableParticipant(memberObj)">
</td>
<td>
<$ memberObj.membername $>
</td>
<td>
<input type="checkbox" ng-disabled="isDisabled">
</td>
<td>
<input type="checkbox" ng-disabled="isDisabled">
</td>
<td>
<input type="checkbox" ng-disabled="isDisabled">
</td>
<td>
<input type="checkbox" ng-disabled="isDisabled">
</td>
</tr>
</tbody>
</table>
Call this function just after you load your members array
function updateMembersDisability()
{
$scope.members.forEach(function(member){
member.isDisabled = false;
if(member.membertype==1){
member.isDisabled = true;
} else if(member.membertype==2 && $scope.program.updatePermission){
member.isDisabled = true;
}
});
}
And then you can use IsDisabled property directly like this
<td>
<input type="checkbox" ng-disabled="memberObj.isDisabled && (program.created_by == memberObj.id))">
</td>
Aliasing with the as keyword is for controllers only.
You can, however, generate these checkboxes with ng-repeat to have a less boilerplate.
<tr ng-repeat="memberObj in members | orderBy : ['membername'] as resultMem track by memberObj.id">
<td align="middle" title="Add/Remove Participant" class="width40">
<input type="checkbox" ng-disabled="disableParticipant(memberObj)">
</td>
<td>
<$ memberObj.membername $>
</td>
<td ng-repeat="i in [1,2,3,4]">
<input type="checkbox" ng-disabled="disableParticipant(memberObj) && (program.created_by == memberObj.id)">
</td>
</tr>
Add a property in your member object once they are loaded like this,
function updateMembersDisability()
{
$scope.members.forEach(function(member){
Object.defineProperty(member, 'isDisabled', {
get: function() {
if($scope.memberObj.membertype==1){
return true;
} else if($scope.memberObj.membertype==2 && $scope.program.updatePermission){
return true;
}
return false;
}
});
});
}
Hello i have a form inside a table row within an ng-repeat, inside that form i have a number field and a button(custom directive named "action") now when that button is clicked i want the form to do validation before submitting but when i try nothing happens i get no errors.
<table class="table schedules">
<thead>
<tr>
<th style="text-align:center;" > Ticket Type</th>
<th style="text-align:center;" > Ticket Price (GHS)</th>
<th style="text-align:center;" > How many?</th>
<th></th>
</tr>
</thead>
<tbody>
#if (count($ticketTypes) <= 0))
<tr ng-hide="d.ticketTypes.length > 0">
<td style="text-align:center;" colspan="5">
<h4 style="">There are no tickets available.</h4>
</td>
</tr>
#endif
<tr ng-repeat="type in d.ticketTypes">
<form name="ticketForm" ng-submit="ticketForm.$valid && addToCart('event', d, type.id, $index)" novalidate>
<td style="text-align:center;" ><b><% type.fee_cat_desc %></b></td>
<td style="text-align:center;" ><b><% type.event_fee | currency : '₵' %></b></td>
<td style="text-align:center;" ><b><input type="number" ng-model="line.d.ticket_no" class="form-control" min="1" max="30" style="width:80px !important;" ng-required/></b></td>
<td>
<action text='Buy Ticket' state='<% state %>' index='<% $index %>' selected='<% selectedIndex %>'></action>
</td>
</form>
</tr>
</tbody>
</table>
This is my action directive:
html:
<button type="submit" ng-class="{ 'btn-set': isReady === true || isWorking === true || isComplete === true || hasFailed === true, 'btn-ready-state': isReady === true || selected != index, 'btn-working-state': isWorking === true && selected == index, 'btn-failed-state': hasFailed === true }" ng-cloak>
<i ng-if="isReady === true || selected != index" class="fa fa-shopping-cart"></i>
<img ng-src="/images/loading - small.png" class="img" ng-show="isWorking && selected == index "></span>
<i ng-if="isComplete && selected == index " class="fa fa-check"></i>
<span class="text">
<span ng-if="isReady === true || selected != index"><% text %></span>
</span>
</button>
One of the thing you missed to name="" attribute on a form, it is needed to start form validation on field by angular
<input type="number" name="ticket_no-{{$index}}" ng-model="line.d.ticket_no"
class="form-control" min="1" max="30" style="width:80px !important;" ng-required/>
Refer this SO Answer for more Explaination
You've got multiple <form>s with the same name. This is a problem for angular because it references each form by its name. A quick fix would be to use $index or type to make the names different.
<tr ng-repeat="type in d.ticketTypes">
<form name="ticketForm_{{type}}" ng-submit="ticketForm.$valid && addToCart('event', d, type.id, $index)" novalidate>
<td style="text-align:center;" ><b><% type.fee_cat_desc %></b></td>
<td style="text-align:center;" ><b><% type.event_fee | currency : '₵' %></b></td>
<td style="text-align:center;" ><b><input type="number" ng-model="line.d.ticket_no" class="form-control" min="1" max="30" style="width:80px !important;" ng-required/></b></td>
<td>
<action text='Buy Ticket' state='<% state %>' index='<% $index %>' selected='<% selectedIndex %>'></action>
</td>
</form>
</tr>
Make sure that you have a input field with the type="button" and the name="submit"