Form Validation with font awesome icons inside ng-repeat - icons

Good Afternoon,
I'm having a problem trying to get my font awesome icons to work as expected, I have a shopping cart where hardware can be ordered, an address field is provided for each item so the user can send hardware to different locations, as each location is provided I want the icon to change from a cross to a tick, I'm using AngluarJS form validation:
Problem I have is the icon only changes when the last address is entered, I'm sure I need to use an $index or something like it but can't figure it out:
Here is my code...
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:55%;">${Product} </th>
<th style="width: 1%;">${Quantity}</th>
<th style="width: 24%;">${Delivery Address:}</th>
<th style="width: 1%;"></th>
<th style="width: 19%;"><span style="visibility: hidden;">${Item Controls}</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.cartItems track by item.sys_id | orderBy: 'order'">
<td data-th="Product">
<div class="row">
<div class="col-sm-2 visible-lg"><img ng-show="item.picture" ng-src="{{item.picture}}" alt="{{item.name}}" class="img-responsive item-image"/></div>
<div class="col-sm-10">
<h2 class="nomargin h4">{{item.name}}</h2>
<p class="hidden-xs">{{item.short_description}}</p>
{{item.sys_id}}
</div>
</div>
</td>
<td data-th="Quantity">
<input type="number"
title="${Quantity}"
ng-if="item.show_quantity"
class="form-control text-center"
ng-model="item.quantity"
min="1"
max="20"
ng-model-options="{ updateOn: 'blur' }"
ng-change="c.updateQuantity(item)">
<span ng-if="!item.show_quantity">-</span>
</td>
<td>
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
<td class="col-md-12 text-right">
<button title="Edit" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" aria-label="${Edit Item} {{item.name}}" ng-show="item.has_options" ng-click="c.editItem(item.sys_id)"><i class="fa fa-edit"></i></button>
<button title="Remove" class="btn btn-danger btn-sm" aria-label="${Remove Item From Cart} {{item.name}}" ng-click="c.removeItem($event, item)"><i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
Lines of interest:
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
Images Attached:
Cart OnLoad
Last Address Changed
Any help and I would be grateful

Found the solution here:
How to validate inputs dynamically created using ng-repeat, ng-show (angular)
Updated Code:
<td>
<select ng-model="address" name="address{{$index}}" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm['address' + $index].$dirty" class="fa fa-check-circle" style="color:#008000;"> {{myForm.address.$dirty}}{{fieldUpdated}}</i>
<i ng-show="myForm['address' + $index].$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;"> {{myForm.address.$pristine}}</i>
</td>

Related

The anchor element doesn't recognized on specify positions with tag helpers .Net core 6

I'm working with .Net Core 6 and currently I have problems to make it works the elements with tag helpers.
<div class="container p-3">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-primary">Category List</h2>
</div>
<div class="col-6 text-end">
<a asp-controller="Category" asp-action="Create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Create new category
</a>
</div>
</div>
<br /><br />
<table class="table table-bordered table-striped" style="width: 100%;">
<thead>
<tr class="table-primary" ">
<th scope="row">Category Name</th>
<th scope="row">Display Order</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var category in Model)
{
<tr>
<td width="50%">#category.Name</td>
<td width="30%">#category.DisplayOrder</td>
<td>
<div class="w-75 btn-group" role="group">
<a asp-controller="Category" asp-action="Edit" asp-route-id="#category.Id" class="btn btn-primary mx-2">
<i class="bi bi-pencil-square"></i> Edit
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
Here the first anchor works perfectly,
<a asp-controller="Category" asp-action="Create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Create new category
</a>
But when I'm using the next one, and I run the application, the navigator does not recognize the tag and does not create automatically the sintax to add the href tag.
<a asp-controller="Category" asp-action="Edit" asp-route-id="#category.Id" class="btn btn-primary mx-2">
<i class="bi bi-pencil-square"></i> Edit
</a>
After testing, I finally found the reason.
The problem is with this line of code:
<tr class="table-primary" ">
It has one more ".
Remove it, the href will be displayed normally.
<tr class="table-primary">

DataTables - Disable Smart Search

I searched the documentation, but when applying it to my api it didn't work... I need to disable DataTables smart search. Insert "smart": false at startup as below:
var table = $('table#tbitens').DataTable({
"ajax" : "/api/v1/get/itens/dtItem?baixado=" + baixado,
"deferRender": true,
"processing": true,
"serverSide" : true,
"destroy": false,
"scrollX": "100%",
"scrollY": "50vh",
"scrollCollapse": true,
"stateSave": true,
select: {
style: 'single'
},
"search": {
"smart": false
},
Imagem do sistema de busca
In the search button I tried these two ways, the one commented on and the one on the top line, but without success. If anyone can help, I appreciate it, I'm new in the area and I'm still in the learning process. Trying to solve this task since Monday.
//Botão pesquisar
$('#btnPesquisarItem').on('click', function(){
var otable = $('#tbitens').DataTable();
var collection = $("input.column_filter");
collection.each(function() {
if ($(this).val().trim() != ''){
otable.columns($(this).parents('tr').attr('data-column')).search("^" + $(this).val() + "$", true, false, true).draw();
// original: otable.columns($(this).parents('tr').attr('data-column')).search($(this).val().trim());
}
});
HTML
<div class="tab-content" id="tabConteudo">
<!-- FILTROS -->
<div class="tab-pane fade" id="pesquisar" role="tabpanel" aria-labelledby="pesquisar-tab">
<div class="table-responsive p-2">
<div class="row">
<form id="formitens" class="form-horizontal" method="POST" style="margin: 10px">
<div class="col-sm-4">
<table style="width: 67%; margin: 0 auto 2em auto;">
<tbody>
<tr id="filter_col0" data-column="1">
<td>Empresa</td>
<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
</tr>
<tr id="filter_col1" data-column="2">
<td>Filial</td>
<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
</tr>
<tr id="filter_col2" data-column="3">
<td>Item</td>
<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
</tr>
<tr id="filter_col3" data-column="4">
<td>Agregado</td>
<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
</tr>
<tr id="filter_col4" data-column="5">
<td>Chapa</td>
<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
</tr>
<tr id="filter_col5" data-column="6">
<td>Descrição</td>
<td align="center"><input type="text" class="column_filter" id="col6_filter"></td>
</tr>
<tr id="filter_col6" data-column="7">
<td>Conta</td>
<td align="center"><input type="text" class="column_filter" id="col7_filter"></td>
</tr>
<tr id="filter_col7" data-column="8">
<td>Classe</td>
<td align="center"><input type="text" class="column_filter" id="col8_filter"></td>
</tr>
<tr id="filter_col8" data-column="9">
<td>Centro</td>
<td align="center"><input type="text" class="column_filter" id="col9_filter"></td>
</tr>
</tbody>
</table>
</div>
</form>
<div class="col-sm-4">
<button type="submit" id="btnPesquisarItem" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Pesquisar
</button>
<button type="button" id="btnLimparPesquisa" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span> Limpar pesquisa
</button>
</div>
</div>
</div>
</div>
<!-- ITENS -->
<div class="tab-pane fade show active" id="itens" role="tabpanel" aria-labelledby="itens-tab">
<div class="table-responsive p-2">
<div class="panel-header p-1">
<div class="row">
<div class="col-sm-1">
<a class="tip btn btn-sm btn-success" data-container="body" data-toggle="popover" data-content="Insere um novo item" th:href="#{/itens/add/}"
sec:authorize="hasAnyAuthority('Administrador', 'Aquisições')">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div class="col-sm-4" sec:authorize="hasAnyAuthority('Administrador', 'Movimentações')">
<select id="movimentacoes" autofocus="autofocus">
<option value="" disabled selected>Selecione um item para movimentar</option>
</select>
</div>
<div class="col-sm-2">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="verBaixados">
<label class="form-check-label" for="exampleCheck1">Exibir Itens Baixados</label>
</div>
</div>
</div>
</div>
<table id="tbitens" class="table table-sm table-hover table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Empresa</th>
<th>Filial</th>
<th>Item</th>
<th>Agregado</th>
<th>Chapa</th>
<th>Descrição</th>
<th>Conta</th>
<th>Classe</th>
<th>Centro</th>
<th:block th:each="area : ${areasConts}">
<th th:text="#{general.cost} + ' ' + ${area.descricao}">Custo</th>
<th th:text="#{general.depreciation} + ' ' + ${area.descricao}">Depreciação</th>
</th:block>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>

Responsive drop-down menu with table inside

Hi I'm trying to obtain responsive menu on navbar in application on which I work with bootstrap 3. My menu has element with bell icon. The purpose of this one is to remind user some information. Below I show that menu element on screen:
I have fixed settings for width of my menu. I'd like to have responsive menu, not static, because this application should work on few screen resolutions. What should I obtain that? I tried to obtain that by pecrentage property for: width, min-with properties, but it has crashed.
Below I show html tags and CSS settings:
Html:
<li class="dropdown ng-isolate-scope open" loader="remainderLoading"><a ng-show="!loader" id="reminderLink" class="dropdown-toggle" data-toggle="dropdown" style="font-size:18px; cursor:pointer;" ng-click="removeNotification()" aria-expanded="true"><i class="fa fa-bell"></i></a>
<!-- ngIf: numOfRemindedNotes && !loader && !clicked -->
<div id="reminderMenu" class="dropdown-menu">
<div class="form-group col-md-7 disabled">
<label>Reminder's date:</label>
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty ng-valid-date ng-valid-required" ng-change="getNotesByDate()" initdate="new Date()" ng-click="noteDatepicker.opened = true" uib-datepicker-popup="" ng-model="dateNotes.value" is-open="noteDatepicker.opened" ng-required="true" close-text="Close" readonly="" required="required"><div uib-datepicker-popup-wrap="" ng-model="date" ng-change="dateSelection(date)" template-url="uib/template/datepickerPopup/popup.html" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty"><!-- ngIf: isOpen -->
</div>
</div>
<div ng-show="noteLoading" class="ng-hide">
<img width="32" height="32" src="/packages/img/loader.gif">
</div>
<div class="col-md-12">
<table id="reminderTable" class="table table-bordered table-striped" ng-show="!noteLoading">
<tbody>
<tr id="reminderTableElement">
<td class="col-md-3">
Case Id
</td>
<td class="col-md-3">
Trans id
</td>
<td class="col-md-3">
Type customer
</td>
<th class="col-md-3">
Note
</th>
<td class="col-md-3">
Date
</td>
<td class="col-md-3"></td>
</tr>
<!-- ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426024</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsadsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer --><tr ng-repeat="note in notes.notesForBasicCustomer" id="reminderTableElement" class="ng-scope">
<td style="cursor: pointer;">
<a target="_self" ng-click="editCaseById(note.case_id)" class="ng-binding">426011</a>
</td>
<td class="ng-binding">
639252-2
</td>
<td>Basic</td>
<td class="ng-binding">
asdsa
</td>
<td class="ng-binding">
2018-08-09
</td>
<td>
<div class="btn btn-primary" ng-disabled="noteLoading" ng-click="hideReminder(note['0'].id,'basic')">Close
</div>
</td>
</tr><!-- end ngRepeat: note in notes.notesForBasicCustomer -->
<!-- ngRepeat: note in notes.notesForAdditionalCustomers -->
</tbody>
</table>
</div>
</div>
</li>
CSS:
#reminderTableElement{
font-size: 12px;
}
#reminderMenu{
min-width: 540px;
}
I would be grateful for help. Best regards ;)
You should use #media tags to implement styles. For example
#media (min-width: 1600px) {
#reminder-menu {
...
}
}
It is considered best practice to design for mobile first, so you would use min-width: 540px or whatever your smallest breakpoint is first, then add more breakpoints as needed.

<input/> Text input in Angular-UI accordion heading bootstrap inline edit

I am trying to insert an input in the header of Angular-UI's accordion, but the accordion messes up when the input is shown. I think it might be because I hide the actual heading text so the height of the header changes and the accordion messes up. Ideally, I would like to keep the height dynamic (responsive point-of-view), but a fixed height will do as well.
When the edit button is clicked, I want to show an input field in the header so the user can update the text (saving, or binding the value is not a concern.. just want to show the input field correctly).
I have a demo of what I am wanting using a table, and I would like to replicate that functionality into the accordion header.
<table class="table table-bordered table-striped table-hover">
<thead>
<tr id="th-row">
<th>Name</th>
<th class="col-xs-1">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span ng-show="!edit" ng-model="personName">John Smith</span>
<div ng-show="edit" class="col-xs-12">
<input type="text" ng-model="personName" ng-required="true" value="" class="form-control" placeholder="Person Name">
</div>
</td>
<td>
<button ng-show="!edit" class="btn btn-xs btn-primary" ng-click="edit = true">
<i class="glyphicon glyphicon-edit"></i>
</button>
<button ng-show="edit" class="btn btn-xs btn-danger" ng-click="edit = false">
<i class="glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
</tbody>
</table>
Now my accordion code:
<accordion-group>
<accordion-heading>
<span ng-show="!edit1" ng-model="headingName">Header with Button group</span>
<div ng-show="edit1" class="col-xs-12">
<input type="text" ng-model="headingName" ng-required="true" value="" class="form-control" placeholder="Heading Name">
</div>
<div class="pull-right">
<button ng-show="!edit1" class="btn btn-info btn-xs" ng-click="edit1 = true; $event.stopPropagation();"><i class="glyphicon glyphicon-edit"></i></button>
<button ng-show="edit1" class="btn btn-danger btn-xs" ng-click="edit1 = false; $event.stopPropagation();"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
Here is a Plunker Demo

Bootstrap table with multiple row

I want a "large" table to be beautiful in both mobile devices and desktop. Without x-scrolling.
One way, I think, is to create a table row which is high (two rows, with rowspan=2).
But is there a smoother and more good-looking way to make this? This example below is okay, but I still think it's possible to make the result more clean and nicer.
One problem is also that I can't use ant filter plugins and pagination, as the scripts think that one row is two rows.
Any ideas?
<div class="container">
<div class="table-responsive">
<table class="table">
<tbody>
<tr class="bg-danger">
<td rowspan=2>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle btn-md" type="button" data-toggle="dropdown" onclick="">+
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Edit</li>
<li class="bg-danger">Delete</li>
</ul>
</div>
</td>
<td>
<div>
<h4>Christian A</h4></div>
</td>
<td>
<h4 class="pull-right">133 €</h4></td>
</tr>
<tr class="bg-danger">
<td colspan=2>
2014-05-05 - Not paid
</td>
</tr>
<tr class="bg-success">
<td rowspan=2>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle btn-md" type="button" data-toggle="dropdown" onclick="">+
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Edit</li>
<li class="bg-danger">Delete</li>
</ul>
</div>
</td>
<td>
<div>
<h4>Nicolaus S</h4></div>
</td>
<td>
<h4 class="pull-right">122 €</h4></td>
</tr>
<tr class="bg-success">
<td colspan=2>
2014-05-05 - Payed
</td>
</tr>
</tbody>
</table>
</div>
</div>
http://jsfiddle.net/weuf6vb3/

Resources