When I enter some value in search text box, the [X] close button dynamically appear in the left corner of the text box and I need to clear and search results when I click the [X] close button using AnglarJS.
Example - Exactly like in Microsoft Outlook email search.
In order to display the X, you'll need to use ng-show to only show it when there's content in the input and ng-click to bind the clear text logic, as such:
div {
width: 300px;
position: relative;
}
input {
width: 100%;
}
span {
position: absolute;
right: 2px;
top: 2px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<input type="text" ng-model="text">
<span ng-show="text" ng-click="text='';">X</span>
</div>
Related
I created a dropdown menu that opens when you click on a text box, and then when you chose a string for that dropdown list, it puts it in the text box.
I would like to make that when you hover your mouse on the strings in the dropdown, they get slightly highlighted! how can I achieve this?
<div class="row">
<div class="col-xs-12 max300" uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="remarks" class="form-control" ng-model="vm.presence.description" ng-click="vm.toggleDescriptionDropdown()" autofocus></textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions" ng-click="vm.presence.description = descr.text; vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
and the css to keep the dropdown aligned with the textbox:
#descriptionDropdown {
width: 100%;
line-height: 150%;
padding-left: 8px;
position: relative;
}
thank you very much
you can do something like this
#descriptionDropdown li:hover{
background-color:#eaeaea;
}
Change the color code to your desired color code.
And remove the padding from ul to avoid space around background when you hover. Instead, use padding on li
#descriptionDropdown li{
padding-left:8px;
}
You could add this css :
li:hover {
background-color: blue;
}
I'm using text-angular with editableTextAngular directive in a angular xeditable form and when entering in edit mode the text container goes to infinity.
This is my CSS:
.ta-editor {
min-height: 300px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin:20px 0;
}
View Mode & Edit Mode:
In view mode it is shown correctly. In edit mode the text container goes outside the screen.
This is my html:
<div class="form-group" style="width: 100%;margin-top: 10px;">
<span
editable-text-angular="notificacion.texto"
data-e-name="notificacion.texto"
data-e-class="editable-text-angular"
ng-bind-html="notificacion.texto"
>
{{notificacion.texto}}
</span>
</div>
$scope.clickUpload = function(){
$timeout(function() {
angular.element('#upload').trigger('click');
}, 100);
};
For example, 3 times this works fine, but on 4th click - nothing going on
How can I fix this?
I am editing my original answer since I didn't fully understand what it is you are trying to do. You can style an input type="file" without having to use jQuery/javascript to hide the original element and simulate a click on it. You can use standard HTML/CSS to do this...
CSS:
.upload {
height:25px;
width:70px;
background:#ccc;
color:#fff;
overflow:hidden;
text:'Upload';
}
.upload input {
display: block !important;
width: 70px !important;
height: 25px !important;
opacity: 0 !important;
overflow: hidden !important;
}
#uploadText {
left: 6px;
position: relative;
top: -45px;
}
HTML:
<div class="upload">
<input type="file" name="upload" />
<h3 id="uploadText">Upload</h3>
</div>
Given these are not ideal styles and I have no future as a graphic designer, they are enough to demonstrate how you can modify the style of the standard input type="file" without needing javascript.
My code looks like this:
<div class="block-border"
data-ng-show="qty > 0">
xxx
</div>
I know there have been a lot of changes with Animation in AngularJS. Can someone tell me the easiest way for me to make it take 500ms to show and 50ms to hide the xxx when the value of qty changes. Note that I am using the very latest AngularJS.
Reference angular-animate.js
Add ngAnimate as a dependent module:
var app = angular.module('app', ['ngAnimate']);
Pick a name for your transition, for example 'fade', and then define the appropriate CSS classes based on the naming convention described in the documentation:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove,
.fade.ng-hide-add {
display: block !important; /* or inline-block, as appropriate */
}
.fade.ng-hide-remove {
transition: all linear 1000ms;
}
.fade.ng-hide-add {
transition: all linear 500ms;
}
Add the class to your element:
<div class="block-border fade" ng-show="qty > 0">
Demo: http://plnkr.co/edit/HWi0FfDOsHeSOkcrRtN2?p=preview
I couldn't get the accepted answer to work, but the following did work (taken largely from this ng-nuggets post):
.fade {
transition: all linear 500ms;
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
and then my HTML element which I wanted to fade in and out looked something like this:
<span data-ng-show="copyLinkClicked" class="fade">some text here</span>
As #MichaelNguyen mentioned, Bootstrap does appear to have a style already called fade, and we are using Bootstrap in our application, yet the above styles worked nonetheless. If you already have a style named fade, then change the name to something unique before using the above code.
If you want to fade in using ng-if as a boolean angular has some nice documentation here https://docs.angularjs.org/api/ngAnimate . I used ng-if for my fading purposes here's an example below:
form.html
<form name="exampleForm" ng-submit="submit()">
<input type="email" placeholder="Email Address" ng-model="email" required>
<input type="text" placeholder="Name" ng-model="name" required>
<input class="invalid-btn" ng-if="exampleForm.$invalid" type="submit" value="Invalid" />
<input class="valid-btn" ng-if="exampleForm.$valid" type="submit" value="Valid">
</form>
form.css
/* css for button that will show when form is invalid */
.invalid-btn {
border: 1px solid #222;
width: 100px;
height: 50px;
color: #222;
background: #fff;
}
.invalid-btn.ng-enter {
opacity: 1;
}
/* The finishing CSS styles for the enter animation */
.invalid-btn.ng-enter.ng-enter-active {
opacity: 0;
}
.valid-btn {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
}
/* The starting CSS styles for the enter animation */
.valid-btn.ng-enter {
transition:0.5s linear all;
opacity: 0;
}
.valid-btn.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 0.3s;
/* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
transition-duration: 0s;
}
/* The finishing CSS styles for the enter animation */
.valid-btn.ng-enter.ng-enter-active {
width: 100px;
height: 50px;
background: #F26623;
color: #fff;
opacity:1;
}
The way this works is if you want to fade in a button with a different color or text and different text color you can fade in a button when the form is filled out and valid and the invalid button will fade out leaving only one button depending on the state of the form. Kind of a hack but it works and looks smooth. I had to set a delay using .ng-enter-stagger because loading the animations at the same time was causing the buttons to blink and jump and not animate smoothly. So in this case we let invalid button hide first then load valid button when form is valid and all input fields have been filled out correctly.
I want to change the class of one div while hovering over another div using AngularJS directives. Here is what I have so far http://jsfiddle.net/E8nM5/38/
HMTL
<div ng-controller="Ctrl" ng-app>
<div ng-class="my-class">This div will change class when one hovers over bottom DIV </div>
<br/>
<div class="hover-div" ng-mouseenter="my-class = 'highlight'" ng-mouseleave="my-class = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>
</div>
CSS
div.highlight {
padding: 10px;
background: red;
color: white;
}
div.lowlight {
padding: 10px;
background: blue;
color: white;
}
div.hover-div {
padding: 10px;
background: green;
color: white;
}
JS
function Ctrl($scope){
}
Any ideas?
Change my-class to myclass (i.e. the dash causes problem).
<div ng-controller="Ctrl" ng-app>
<div ng-class="myclass">This div will change class when one hovers over bottom DIV </div>
<br/>
<div class="hover-div" ng-mouseenter="myclass = 'highlight'" ng-mouseleave="myclass = 'lowlight'">HOVER OVER ME TO CHANGE THE UPPER DIV's CLASS</div>
</div>
Updated: the reason my-class isn't allowed in the expression is because AngularJS treats the dash as minus symbol and tries to parse it that way. Apparently, it can't parse the statement my - class = 'highlight'. Unfortunately, after reading AngularJS parser code, I can't find a way to "help" it distinguish between dash and minus.
You need to remove the hyphen from my-class so it will work properly in your Controller. Other than that it looks like you have it mostly done. Here's a little snippet - I also added it as text in the div so you can see it change
Your HTML File:
<div class="{{myClass}}"> {{myClass}} </div>
<div class="hover" style="height:50px; width:50px; border:1px solid black;" ng-mouseleave="myClass='test'" ng-mouseenter="myClass='hola'"> </div>
Controller
function Ctrl($scope){
$scope.myClass="test";
}