javascript - Formatting Angular JS/Bootstrap Tabs -


javascript/html/angular newbie here. run problem has me stumped, can't find online me.

i've created small application uses bootstrap tabs. here's code responsible creating tabs:

<tabset class="tab-container">     <tab ng-repeat="tab in tabs" active="tab.active"> <!-- tab highlight directive -->       <tab-heading>       <span>{{tab.title}}</span>       <i class="glyphicon glyphicon-remove" ng-click="removetab($event, $index)"></i> <!-- tab close button -->     </tab-heading>     {{tab.content}}   </tab>   <button class="btn btn-default" ng-click="addtab()"></button> </tabset>

i want add highlights words in tabs (for example, if tab contents "the lazy fox", want highlight fox in yellow). when try adding html tags tab.content, tabs don't parse html tags , displays them normal text.

thanks help!

i see, using angularui (which great :) ). here filter solve problem:

  1. add javascript project (you can reuse everywhere):

    https://code.angularjs.org/1.3.10/angular-sanitize.js

and

angular.module('highlightdemo', ['ngsanitize']);

and following filter:

app.filter('highlight', function () {     return function (text, search, casesensitive) {         if (text && (search || angular.isnumber(search))) {             text = text.tostring();             search = search.tostring();             if (casesensitive) {                 return text.split(search).join('<span class="ui-match">' + search + '</span>');             } else {                 return text.replace(new regexp(search, 'gi'), '<span class="ui-match">$&</span>');             }         } else {             return text;         }     }; });

  1. setup highlight options (in controller):

    $scope.hightlightsearchkeyword = 'the fox';

and able use filter everywhere.

<span ng-bind-html="tab.content | highlight:hightlightsearchkeyword"></span>

  1. make sure add add a css style span.ui-match example

    .ui-match { background: yellow; }


Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more