I am trying to create a button in angularjs with a img tag where it's image changes to disabled state using css. I am using2 class 1 for enabled other for disabled.
<button class="save-button" ng-disabled="{{isEnabled}}"></button>
Please help my plunker for the problem
when using ng-disabled, the expression should be a true/false value to determine if the button is actually disabled.
The code shoud look like this:
<button class="save-button" ng-disabled="!isEnabled" ng-click="test()"></button>
<button title="Toggle" ng-click="isEnabled = !isEnabled">toggle</button>
Now the button is disabled when the 'isEnabled' value is set to false.
I fixed your plnkr
Related
I am trying to create a sign-in button where the button displays 'Sign-in' when the user is not signed in and their profile picture when they are signed in.
The button displays the right things when I use text instead of an image when the user is signed in.
{!user || !isSignedIn ? 'Sign in' : 'Profile'}
I am unsure how to add the image to use as a button instead.
You are trying to wrap image inside the button tag which is wrong approach. You should use Input Tag to embedded image on button or you can use image as a backgroundUrl for button, With the help of conditional class styles you can show text or imagebackground on button. which is more obvious and better approach I think.
<input type="image" src="youpathtoimage" />
or
<button style="background: url(yourimage.png)" />
for conditional styles I've always used MUI CLSX. If you are using Material UI in your project. Try to use CLSX.
I have a tooltip on a save button, when the button is disabled (e.g. invalid data is entered), I want to show a tooltip and then after some delay make it disappear. I use
tooltip-is-open to open the tooltip, but then I dont know how to close it. I tried
tooltip-popup-close-delay but that needs a close trigger.
Here is a simple version of the code:
<button ng-disabled="$ctrl.isInvalid">
<span
class="glyphicon glyphicon-save"
uib-tooltip="Some message"
tooltip-enable="$ctrl.isInvalid"
tooltip-is-open="$ctrl.isInvalid"></span>
Save
</button>
I am trying to use hover to show dropdown / popover and use data-container="self" to make the dropdown / popover stay appear when mouse moved to it. This method works on Google Chrome but not on Firefox.
Example Code:
<button type="button" data-placement="right" data-trigger="hover | click" data-delay="300" bs-dropdown="dropdown" data-container="self">Click to toggle dropdown</button>
How can I get it works on firefox?
I never heard of the self keyword as the container parameter in angular-strap. Where does it come from?
Anyway, here, container is useful if you want to append the dropdown to another element. Since it does not seem to be your case, simply do not provide data-container, and the dropdown will be appended to the element itself.
EDIT:
Okay, so, I tried, and saw the problem you are describing. You could try the solution given here (https://stackoverflow.com/a/21293850/4506790): add a specific class to your button, and give it in data-container.
<button type="button"
class="dropdown-btn"
data-placement="right"
data-trigger="hover"
data-delay="300"
bs-dropdown="dropdown"
data-container=".dropdown-btn">
Hover to toggle dropdown
</button>
I'm new to AngularJS, and I want to make simple animation like PrestaShop shows when user click "Add to cart" button on the product.
I found nice article about animations in AngularJS, but there is a few methods of doing that...
Suppose I have a grid list of products with photos for each of them and button with text "Add to cart". When user click on it the photo should be "cloned", opacity should be 0.5 and this photo should slide position to cart which is on the top of the site.
I have one concept:
Photos in ng-repeat can be rendered twice, where one of them is like hidden "behind the second" and the mentioned "clone" with animate should take affect of them, but how to make it in AngularJS manner? (if this is good idea)
If you don't need to support old browsers, instead of rendering the photo twice, try something like this;
Set a CSS to change the opacity, say:
.opaque {
opacity: 0.5;
/* and maybe other browser specific opacity settings */
}
And in your HTML:
<img src="...." ng-class="{opaque:isOpaque}" />
<button type="button" ng-click="isOpaque=true">Add to cart</button>
As you can see, the ng-class on the <img> is set to 'opaque', which will only be activated if isOpaque === true. The 'Add to cart' button will then set isOpaque to true when clicked.
The rest is just to prepare your controller as usual.
Hope this helps.
When creating a xtype=radiogroup, the rendered element is using input type=button instead of input type=radio, I took the example from the doc, put it into a fiddle and the same happens. Tried this in Firefox and Chrome.
Why is not generating radio inputs, and how can I fix this ?
This is a correct behavior. ExtJs is using input type=button to render radiogroup. These inputs are styled with css to look like real radio buttons.
As #matt has mentioned the reason for using input type=button is that a radio box's color, border and background cannot be styled using CSS.
In your fiddle inputs look like plain buttons because jsfiddle didn't load ext-all.css properly. If you add ext-all.css manualy (like I did in this fiddle) you will see that all inputs appear as if they were radio buttons.