I am using Angular UI Typeahead with a custom template. When one is not using a custom template, the out of the box directive highlights the matching term. However, when one uses a custom match template, the match highlighting is not working.
I created a plunk with an example of the issue. Angular Typeahead Highlighting Plunk
Below is my custom template: MatchTemplate.html
<div>
<span class='type'>{{match.model.type}}</span>
<span class='name'>{{match.model.name}}</span>
</div>
Any help is appreciated.
You can use the typeaheadHighlight filter in your template:
<div>
<span class='type' bind-html-unsafe="match.model.type"></span>
<span class='name' bind-html-unsafe="match.model.name | typeaheadHighlight:query"></span>
</div>
You have to use bind-html-unsafe as this filter generates HTML (<strong> tags around the match).
See plknr.
You're not using the typeaheadHighlight filter (requires bind-html).
A working example would be
<div>
<span class='type' bind-html-unsafe="match.model.type | typeaheadHighlight:query"></span>
<span class='name'>{{match.model.name}}</span>
</div>
See the original match template -> https://github.com/angular-ui/bootstrap/blob/master/template/typeahead/typeahead-match.html
Related
I have a list of items (divs) with a button. When I click on one of this buttons I can access the element using
$event.currentTarget
that returns some thing like
<div ng-click="myFunc()">
<i class="someclass"></i>
<span>bla bla</span>
</div>
how can I access and elements to modify attributes like class?
Don't. Use existing directives like ng-class or ng-if, etc in your html templates.
<div ng-click="clicked = true">
<span ng-class="{'someclass': clicked}">bla bla</span>
</div>
See stackblitz
Although you can get the html dom element and edit it you should only do this as a last option and other angularjs supported methods have failed or are not supported.
template
<div ng-click="myFunc($event)">
<i class="someclass"></i>
<span>bla bla</span>
</div>
controller
$scope.myFunc(event) {
var elem = angluar.element(event.currentTarget);
elem.children(".someclass").removeClass("someclass")
}
I cannot get the tooltip display translated value (using angular translate) from an object in ng-repeat loop:
<div ng-repeat="type in types">
<div>
<span ng-bind-html="type.icon"></span>
<label style="font-size: 20px;">{{type.nameNormal | translate}}</label>
<i class="fa fa-info-circle"
tooltip-class="custom-tooltip"
uib-tooltip="{{'type.descriptionNormal' | translate}}"
tooltip-placement="bottom"></i>
<hr class="hr-no-background">
</div>
</div>
P.S. UI Bootstrap version: 0.13.4
Angular: 1.4.4
if you are using 0.13.4 of ui bootstrap the directives are not prefixed with the 'uib' prefix yet
see http://angular-ui.github.io/bootstrap/versioned-docs/0.13.4/#/tooltip for details
Ok, for those, who will face equal problem in the future: I just didn't put any value into my translation file for the descriptionNormal.
Example:
type.descriptionNormal = "DESCRIPTION"
Translation file:
"DESCRIPTION": ""
This was the case. Now everything work fine.
So it seams the tooltip doesn't get displayed if the value is empty.
I need to create custom styling for a select dropdown (including the options). The more I've dug into this, the more I've realized that styling options is quite difficult.
I'm currently using Bootstrap's dropdown and it works great, except for the fact that I have to use a function to assign a value.
This is how I am currently using a 'custom select dropdown':
<div class="form-element-container">
<div class="drop-down dropdown-toggle">
<label for="chooseAdvisor"></label>
<div>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{{mySelection}}</button>
<ul class="dropdown-menu">
<li ng-repeat="option in options">{{option}}</li>
</ul>
</div>
</div>
</div>
You can see that on click, I have to manually set the option in my controller rather than it being directly bound to my model. Is there any way that I can use Bootstrap's dropdown styling with angular's select tag?
I would love to be able to use my options repeater with 'track by', etc:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
You can try it:
https://angular-ui.github.io/bootstrap/#/dropdown
Just a suggestion, I've not tested it yet.
Update answer:
I think you can instead of angular module : acute-select
https://github.com/john-oc/acute-select
Demo : http://john-oc.github.io/
Is there a way to use an ng-if directive without adding a containing element? I'm playing around with dynamic menu items placed by the current view controller and want to handle a dropdown type and non dropdown type, however the ng-if has to be in some kind of element which breaks the bootstrap css.
Here's an example of what I'm trying to do:
<li ng-repeat="item in dynNavList">
<div ng-if="item.dd" ><!--There will be more stuff in here-->
Dropdown test {{item.title}}
</div>
<span ng-if="!item.dd">
NoDropDown {{item.title}}
</span>
</li>
Any nav item created in that html above doesn't style correctly in the navbar because it's inside a div or span element so the css doesn't apply.
I do not want to modify the bootstrap css to get this working and I'm trying to avoid writing any custom directives if possible.
Any suggestions?
ng-if directly on the anchor is fine, demo.
I'm trying to show the user a list of items inside of a popover that is all inside an ng-repeat. I'm using angularjs as well as the ui-bootstrap package (http://angular-ui.github.io/bootstrap/).
HTML
<div ng-repeat='session in sessions'>
<p popover="{{session.items}}">view items</p>
</div>
This will show the array session.items for each session, which contains the information I want to show. However, this shows the brackets of the array as well.
Does anyone know a clean way to do this?
any help would be appreciated, thanks in advance
From ui-bootstrap site you can read
uib-popover - Takes text only and will escape any HTML provided for the popover body.
So if you provide session.items you will get string '[my array content]'. In my opinion you need to use uib-popover-template where your template would be like
<div ng-repeat='session in sessions'>
<p uib-popover-template="'urlToMyTemplateHere'">view items</p>
</div>
------ Template
<div ng-repeat="item in session.items" ng-bind="item"></div>
uib-popover-template takes an url to the template so you have to create file for it to be fetched or try this approach ( I don't really like it but just for testing )
<div ng-repeat='session in sessions'>
<p uib-popover-template="'iamabadapproachtemplate.html'">view items</p>
</div>
<script type="text/ng-template" id="iamabadapproachtemplate.html">
<div ng-repeat="item in session.items" ng-bind="item"></div>
</script>