I can't find any info on this but I'm sure there must be a simple solution. How do you insert an icon in AngularJS input type button. Something like this (although it obviously won't work):
<input type="button" ng-click="someAction()"/>
<i class="fa some-icon"></i>
</input>
I know how to do it with normal button elements, but is it possible with AngularJS?
The input tag doesn't allow tags inside it, but it's easy to make it look like there's an icon in the input. Bootstrap and Angular Material include this in their components.
Bootstrap Input Group
Angular Material input prefixes
Related
I am following the sample code as per this link:
http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/modal
The plunker sample here:
http://plnkr.co/edit/JMV4Hu2x9l9DA9gaGYaF?p=preview
I tried to define a custom template customModal.html using windowTemplateUrl to add a close button (top-right) to the modal box, but the modal dialog won't show properly and I see only dark background and the modal is kind dimmed. Also, the buttons are not responding.
Appreciate if someone could help me define such custom template to allow using close button for all similar modal dialog boxes.
Update: I want to explain why this is not a possible duplicate of this question as suggested. The other question is dealing with "Why we get error when we open the dialog when we specify the template only". In this question, I the template is not showing proper even though I followed the instruction to implement it.
Tarek
in your script template add
<div class="modal-header">
<button type="button" class="close" data-dismiss="dialog" data-ng-
click="cancel($event)">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4>Title</h4>
</div>
In my Angular app I have a button where I apply a CSS style depending on the $index from the ng-repeat.
However whats happening is on page load the buttons style appears as the default (which is class button) for a second before applying the actual style I want (which is customColour{{$index}}).
<button type="button" ng-click="superAction($index)"
class="small button customColour{{$index}}">
</button>
I have confirmed that it must be down to the delay in getting the $index value having spent the last 4 hours playing around with the CSS files (ensuring things like my custom style appears at the top of my css file etc).
So any ideas/suggestions I can try would be appreciated.
I'm trying to use Angular Material color intention classes like md-primary on normal HTML elements as below:
<span class="md-primary">This text is in primary color.</span>
But this is not working. I assume that it is because during rendering, Angular applies color intention classes only to the ngMaterial directives.
Am I correct in this explanation? And if so, is there a workaround for this, apart from creating my own CSS classes?
The class color only will work on the Material elements, but there's a work around:
Just pick the color hex from the Google Material Site http://www.google.com/design/spec/style/color.html#color-color-palette
Sample:
<span style="color: #2196F3"> Material Blue Color</span>
There are CSS/LESS palettes around, if you don't want to pick all these colors. http://zavoloklom.github.io/material-design-color-palette/
I am doing an SPA to test out my AngularJS knowledge. In this app, I have a template where-by users can choose buttons to show how many days of weather forecast they want.
I am using Twitter Bootstrap classes with the AngularJS ngClass to dynamically have the Twitter Bootstrap CSS classes bound to the button elements depending on which button is selected.
What I wish to happen is, with using ng-class in the HTML of the template, if the button is chosen, it will then change the Bootstrap CSS class of that button to btn btn-disabled from btn btn-primary, so it cannot be selected, as it all ready is selected. I did this in the HTML for this template as so —
<div class="btn-group" role="group">
1 Day Forecast2 Day Forecast3 Day Forecast
</div>
<div class="btn-group" role="group">
5 Day Forecast7 Day Forecast10 Day Forecast
</div>
However, when I run this, instead of replacing the Bootstrap CSS class for the element btn btn-primary and change it to btn btn-disabled, as desired; instead, it appends onto the element, so it becomes btn btn-primary btn-disabled all as one, and btn-primary overrules everything visually, so it winds up looking like this in the output —
1 Day Forecast
Naturally, this is not the desired effect I want here. Would someone please tell me how, in AngularJS ngClass, do i have it replace the Bootstrap CSS class, not just append it?
You are correct, using ng-class will add the classes when evaluated as true. So the solution is to add both options to ng-class so that either btn-primary or btn-disabled is added at any time.
<a href="#/forecast/1" class="btn"
ng-class="{'btn-disabled': days === '1', 'btn-primary': days !== '1'}">1 Day Forecast</a>
You also don't need to add the class btn to the ng-class since you want it to be used regardless of the value of days.
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>