I use the Bootstrap Select Plugin to create an extended select with input field and multiple selectable options. I use it in an Angular 1.5.3 application set up with ui-router. It does not work in the view where I need it. The code I include in that view:
<select name="jobdomainTeamId"
class="form-control selectpicker"
data-live-search="true"
multiple=""
style="display: none;"
ng-model="data.detailView.jobDomain.teams"
ng-options="team.id as team.displayName for team in data.detailView.teams"
>
<option value="">No selection</option>
</select>
The attributes 'selectpicker' and 'data-live-search' should trigger Bootstrap to dynamically create a node that provides the extra functionality. But nothing happens when I add this to the Angular view - the select is not visible (style="display: none;").
But when I add the exact same code to index.html, commenting out the ng-view
<!--<div ui-view="body"></div>-->
Here the select works - extra DOM nodes are generated and functionality is as expected.
I included all necessary stuff - Boostrap.css, bootstrap-select.css,jquery-2.1.1.,bootstrap.js and bootstrap.select.js
It occurred to me there might be a conflict between angular dependencies and Bootstrap - I include
angular.module('app',[angular-storage','ui.bootstrap','ui.router','ui.router.modal','xeditable','angular-confirm'])
Does anyone have a clue what might block Bootstrap css / js here??
Turns out that mixing JQuery + Bootstrap.js with Angular.js is asking for trouble.
Bootstrap (via JQuery) works by 'grabbing an element and modifying it'. Angular also modifies the DOM element - is an Angular directive (as well as an browser-native DOM element). What I tried to achieve is impossible this way and i ended up using an Angular library (ui-select) that does what I want.
you defined style='display:none' in your select so it's working as expected. if you want to hide it use the directive ng-hide instead, in some case you should use angular UI for specific actions
I was struggling with the same issue. This methods helped me. Hope it help someone else also
Install jquery on your angular project.
npm i --save-dev #types/jquery
import jquery to the component.
declare var $: any;
run the below code on ngOnInit
ngOnInit(): void {
$('.selectpicker').selectpicker('refresh');
}
Related
I would need to add an autocomplete chips component in our Angular 1.6 application. We are using Typescript, Webpack 2. As we are already using angular-ui-bootstrap, we do not want to introduce also angular-material in order to avoid style conflicts. However the wished result is exactly what material chips provide.
Is there a directive or component that i can use in my case? I found this library but it runs endless exceptions when I import it.
unfortunately I could find only partial solutions with bootstrap typehead, but then I would need to implement all the "chips" part, making me think of re-inventing the wheel.
Stack Newb here. I have an identical problem as yours. Here's how I resolved this:
1. Resolve the ReferenceError: error is not defined within the angular-chips library
The library you used (angular-chips) wasn't designed with typescript in mind. So, you'll first need to resolve the following error ReferenceError: error is not defined by defining it for them in the line above with var error;. This should prepare angular-chips for your webpack useage.
The second issue you'll find is how to add your typeahead-template-url with webpack in the mix. Rather than referring to a separate html file, use an inline template as referenced here: Bootstrap-UI Typeahead display more than one property in results list?.
If you're lazy like me and don't want to follow that hyperlink, use this as example:
2. Template to be added before the <chips> tag:
<script type="text/ng-template" id="yourTemplate.html">
<a tabindex="-1">
<i ng-class="'icon-'+match.model.type"></i>
<span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
</a>
</scrip>
3. Include template in your directive:
typeahead-template-url:"yourTemplate.html"
Worked like a charm for me.
In AngularJS 1.x, there is the ngClass directive to bind a CSS name dynamically. How to implement the same functionality in AngularJS 2?
Angular 2 has a special syntax that replaces ng-*
It actually works in a very similar fashion. To change HTML properties/attributes you just need to use the square brackets syntax.
<div [class]="{error: errorCount > 0}"></div>
Same goes for style, checked, disabled, etc.
API: https://angular.io/docs/js/latest/api/directives/CSSClass-class.html
I'm trying to test my app on a production Rails server and I'm having problems with Angular.
I've commented out config.assets.js_compressor = :uglifier in production.rb so I can see the code better.
The problem is that Angular adds a lot of static code to my HTML.
I use router-ui to insert a template in a div called .search on my application.html.haml through a State.
In the .search div Angular adds this span element.
<span class="ng-scope">// Angular Rails Template
// source: app/assets/javascripts/angular-app/templates/_search.html.haml
angular.module("templates").run(["$templateCache", function($templateCache) {
$templateCache.put("angular-app/templates/_search.html", "</span>
It also adds a \n in the beginning and end of a element.
Like this,
<ul id="showresults">\n <!-- ngRepeat: movie in movieList -->\n </ul>
Angular does work but I have no idea why this extra code is being inserted.
Angular automatically places ng-scope class on elements where scopes are attached, i.e. for controllers, ng-repeat s and etc.
see more here
After a lot of trying and failing I finally found what the problem was. In my Gemfile.lock if I change sprockets (3.2.0) to sprockets (2.12.4) the problem occurs. And for some reason when I do bundle update the sprockets gem goes from 3.2.0 to 2.14.4. So I have to change it back.
I'm evaluating using Angular with ui-select2 and wondered whether someone could provide help on hiding the flicker/conversion of the <select> into the select2 component.
It's only very brief, but users can see the component change styles.
Is there a way of hiding it until the select has been modified by select2?
I came across the same problem and I had a look at the source code. The directive is deliberately initialised later by using a timeout. In the code there is a comment saying "Initialize the plugin late so that the injected DOM does not disrupt the template compiler".
My solution (you can see it in this jsplunker: http://plnkr.co/edit/fXjDxs?p=preview ) is to set the visibility of the select tag to "hidden".
<select ui-select2 ng-model="....." style="visibility: hidden; ">......
When the component is loaded that tag is replaced with a div. In ui-select2.js I have added a line (line 208) to set its visibility to "visible".
elm.prev().css({"visibility": "visible"});
Anyone managed to integrated supersize with angular js?
I tried creating a directive and placing the following code inside a directive
$.supersized({
//params :
supersize did work in creating the
<ul id=supersized" .... >
However my screen isn't displaying supersize's full screen slideshow. Any idea why?