I am new to AngularJS and one of the awesome things here in AngularJS are the ng-hide and ng-show directives which can be used to display certain parts of the web page or hide the. Now sometimes I don't want to show a part and it works fine then, but then sometimes it works but in an undesirable way.
Example:
<div class="row">
<div class="col-xs-6">
<h2>Login</h2>
<p class="text-danger">{{message}}</p>
<form name="form" novalidate>
<div class="form-group">
<label>Email: </label>
<div class="input-group">
<input type="email" name="email" ng-model="credentials.email" placeholder="Email" class="form-control" required />
<div ng-show="form.email.$invalid" class="input-group-addon">
<i class="fa fa-times-circle"></i>
</div>
<div ng-hide="form.email.$invalid" class="input-group-addon">
<i class="fa fa-check-circle"></i>
</div>
</div>
</div>
<div class="form-group">
<label>Password: </label>
<div class="input-group">
<input type="password" name="password" ng-model="credentials.password" placeholder="Password" class="form-control" required ng-minlength=5 />
<div ng-show="form.password.$invalid" class="input-group-addon">
<i class="fa fa-times-circle"></i>
</div>
<div ng-hide="form.password.$invalid" class="input-group-addon">
<i class="fa fa-check-circle"></i>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="form.$invalid" ng-click="authenticate(credentials)">Login</button>
Register
</form>
</div>
</div>
Now if the fields are valid the check symbol appears and if they are not the cross apears like so:
But if you look closely the addon with the cross symbol does not have rounded corners and this is probably because the addon with the check symbol is still there but hidden. Now what do I do in such situations. I would like to the div containing the check addon in such case to disappear altogether instead of staying hidden. How to accomplish that?
Try ng-if="form.password.$invalid" and ng-if="! form.password.$invalid" instead; that removes the element from the DOM.
Take a look at the ngIf documentation for further research. Code snippet:
<div class="input-group">
<input type="password" name="password" ng-model="credentials.password" placeholder="Password" class="form-control" required ng-minlength=5 />
<div ng-if="form.password.$invalid" class="input-group-addon">
<i class="fa fa-times-circle"></i>
</div>
<div ng-if=" ! form.password.$invalid" class="input-group-addon">
<i class="fa fa-check-circle"></i>
</div>
</div>
Use ngIf (and a second ngIf with an inverted predicate) instead of ngShow or ngHide. The former will remove elements from the DOM, while the latter will simply hide them with CSS.
From the Angular documentation:
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
In contrast, the ngShow documentation explains that it hides by adding the .ng-hide class:
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).
Related
First my code used simply String to define email but there were requirement to use multiple values instead of one String[]. I'm using PrimeNG 14.2.x combined with Angular 14 as frontend. Always with inputgroup using text have no problem but somehow it doesn't work well with p-chips component.
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
<input type="text" pInputText placeholder="Email" name="recipientEmails">
</div>
</div>
result:
browser view - ok
after modification I've got
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><em class="pi pi-envelope"></em></span>
<p-chips allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
</div>
</div>
result:
browser view - failed
and from this point p-chips isn't useful anymore. User cannot see what is added.
I've stucked, Any ideas ?
I tried modify css directly to
.p-chips {
width: 100%;
}
but it didn't help
Ok, I've resolved this by using bootstrap right now
<div class="p-col-12 p-md-4">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><em class="pi pi-envelope"></em></div>
</div>
<p-chips placeholder="Emails" allowDuplicate="false" separator="," name="recipientEmails"></p-chips>
</div>
</div>
result
I hope it helps someone
If you look at the title in this codepen you will see that when the cards are loaded into the page, the title shakes/gets displaced. This also happens to the search bar when I am not using codepen and causes the glyph search addon to become unattached in Internet Explorer.
https://codepen.io/cryptodescriptor/pen/MQBWLL
Search Box
<!-- search column -->
<div class="col-12">
<div class="input-group search-group">
<span class="input-group-addon">
<i style="line-height: 50%;" aria-hidden="true">?</i>
</span>
<label class="sr-only" for="search"></label>
<input type="text" class="form-control typeahead" id="search" placeholder="Search Coin">
</div>
</div>
Title
<h1 id="page_title">Crypto Descriptor</h1>
Forgot to mention, it happens to the footer text usually aswell.
I am working on a pretty web application that connects to a RESTful API. My HTML has a "View Employees" button that when clicked, makes an API call to grab all the employees for that company. I am checking the return for the API, and it's getting the entire list, but the page is only rendering the first employee and then blank spaces for the rest. Things get stranger when I go to a different company and click on their View Employees button, because the employees for that company appear, AND one of the blank spaces in the previous company suddenly renders properly. I'm reading the return from the API, and it has all the information I need in a properly formatted way. I'm really confused.
Anyone have any idea what's going on? Here's my HTML. If you need more code please let me know.
<div ng-if="sigFigCtrl.companies[$index].employees.length > 0">
<div class="employee-box" ng-repeat="employee in sigFigCtrl.companies[$index].employees">
<span class="glyphicon glyphicon-edit pull-right" ng-click="sigFigCtrl.toggleEmployeeEdit($index)"></span>
<span class="glyphicon glyphicon-remove pull-right" ng-click="sigFigCtrl.deletePerson(employee._id, $index, sigFigCtrl.companies[$parent.$index].employees)"></span>
<div ng-if="!sigFigCtrl.companies[$index].editEmployee">
<div ng-if="sigFigCtrl.companies[$index].employees.length > 0">
<p><b>Name:</b> {{employee.name}}</p>
<p><b>Email:</b> {{employee.email}}</p>
</div>
</div>
<div ng-if="sigFigCtrl.companies[$index].editEmployee">
<form name="editPersonForm" ng-submit="sigFigCtrl.editPerson(employee._id, $index)">
<div class="form-group">
<div class="col-md-12">
<input type="text" ng-model="sigFigCtrl.editPersonName" id="name" placeholder="Name of Employee" class="form-control" required></input>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" ng-model="sigFigCtrl.editPersonEmail" id="name" placeholder="Email of Employee" class="form-control" required></input>
</div>
<button>SUBMIT</button>
</form>
</div>
</div>
</div>
</div>
Thank you in advance.
I am trying to make a input form with a visual feedback. If the user inputs a number in the input field, the input field along with the addon turns green and a check mark or a cross mark appears next to the currency text.
My issue is that the glypicon overlaps with the currency text all the time. I have tried nesting the second span into the first one as well as modifying margins, paddings to allow for it but the input-group-addon is not budging. What would be a clean and good way of ensuring that the glyphicon is positioned after the currency text?
<div class="col-sm-3 inputGroupContainer">
<div class="input-group">
<input type="number" class="form-control" name="price" value=50 data-moneyamount="moneyamount" required />
<span class="input-group-addon">
USD
</span>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
I am facing a wierd issue with angularjs switch condition. Here is my HTML code:
<div data-component="dropdown" ng-switch on="1">
<div class="btn-group " ng-switch-when="1">
<input id="inputField" type="text" readonly="readonly" />
<button id="inputButton" class="btn i " data-toggle="dropdown">
<i class="icon"></i>
</button>
<ul class="menu">
</ul>
</div>
</div>
Now I am trying to get the reference of input field as $("#inputField"); Executing this command in Chrome's console and gives output as [].
On removing ng-switch i am getting the expected output as [<input id="inputField" type="text" readonly="readonly" />].
I am also facing same issue with ng-include.