Develop Reference

Vue-form-Wizard Plugin Remove Button in Vue js npm

I have an issue which I've used vue-form-wizard,
The first issue I want to know if it is possible to remove the button? which is Goback! and Go next? I've install vue-form-wizardin my npm is there any way to remove it, or should I remove it inside node mudules? I just want to used this plugin for viewing and tracking
The second issue is when I used start-index="2" in <form-wizard> The layout will torn like the image below, is there any way to fix this?
Here's my code
<form-wizard color="#4466f2" start-index="2" title="Total Enterprise Value" subtitle="Accounting" back-button-text="Go back!" next-button-text="Go next!" finish-button-text="We're there">
<tab-content title="Incoming">
<div class="setup-content" id="step-1">
</div>
</tab-content>
<tab-content title="Obligate">
<div class="setup-content" id="step-2">
</div>
</tab-content>
<tab-content title="Journal">
<div class="setup-content" id="step-3">
</div>
</tab-content>
<tab-content title="Certified">
<div class="setup-content" id="step-4">
</div>
</tab-content>
</form-wizard>
</div>

Bootstrap -UI typeahead showing more than 1 field on the results list

So, I'm having the same issue present on this question
Bootstrap-UI Typeahead display more than one property in results list?
And, I already modified the plunker on the answer to my linking and needs
http://plnkr.co/edit/FdkvCUUD3ob7dt256Bgd?p=preview
But then, I realize they are using the 0.5 version of angular-ui, and angular 1.0.5
On my project, i'm using angular 1.4.9 and anguilar-ui 1.3.3 but somehow, my results are not showing or show as undefined
Controller
app.controller('testController', ['$scope', function ($scope) {
$scope.sites = JSON.parse("[{\"SITE_CODE\":\"CODE1\",\"SITE_NAME\":\"NAME1\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE2\",\"SITE_NAME\":\"NAME2\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE3\",\"SITE_NAME\":\"NAME3\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE4\",\"SITE_NAME\":\"NAME4\",\"ADDRESS\":\"\"}]");
}]);
HTML
<div class="row">
<div class="col-xs-4">
<div class="typeahead">
<input type="text" class="form-control" ng-model="test" uib-typeahead="site as site.SITE_CODE for site in sites"
typeahead-no-results="noResults" typeahead-popup-template-url="siteList.html" />
</div>
</div>
</div>
<div class="row" ng-show="noResults">
<div class="col-sm-6">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
</div>
</div>
<script type="text/ng-template" id="siteList.html">
<div class="row">
<a tabindex="-1">
<div class="col-xs-4">
<span ng-bind-html-unsafe="match.model.SITE_CODE | typeaheadHighlight:query"></span>
</div>
<div class="col-xs-4">
<span ng-bind-html-unsafe="match.model.SITE_NAME | typeaheadHighlight:query"></span>
</div>
</a>
</div>
</script>
Any idea what am I missing?

Silly me, I just found out my issue
I was setting typeahead-popup-template-url instead of typeahead-template-url
After making this change, and adding ngSanitize to my module, everything went better than expected.
Now, I need to figure out a way to show the total of results, as I'll be only showing a fraction to the amount of results

Angular ui bootstrap popover with template

<a data-ng-href="" uib-popover-template="'profile.html'" popover-placement="bottom"></a>
<script type="text/ng-template" id="profile.html">
<div class="media">
<div class="media-left">
<a data-ng-href="">
<img class="media-object" data-ng-src="" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" data-ng-bind="mainCtrl.Authentication.getUser().fullName">Unknown User</h4>
</div>
</div>
</script>
error
Error: Syntax error, unrecognized expression: <div class="media">
<div class="media-left">
<a data-ng-href="">
<img class="media-object" data-ng-src="" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" data-ng-bind="mainCtrl.Authentication.getUser().fullName">Unknown User</h4>
</div>
</div>
at Function.Sizzle.error (jquery.js:4421)
at tokenize (jquery.js:5076)
at select (jquery.js:5460)
at Function.Sizzle [as find] (jquery.js:3998)
at jQuery.fn.extend.find (jquery.js:5576)
at jQuery.fn.jQuery.init (jquery.js:196)
at jQuery (jquery.js:62)
at compile (angular.js:7543)
at ui-bootstrap-tpls.js:4688
at processQueue (angular.js:14792)
I created a template with bootstrap components and i am using this template to create bootstrap popover. can someone correct my mistake

I encountered this issue today and when I was about to post the same issue, when I entered my post title, I came across this post.Which in turn led me to the jquery documentation.
Essentially what I did was strip the spaces in the template and it worked fine. I.E:
Before:
<script type="text/ng-template" id="deletePopover.html">
<div>Sample template.</div>
</script>
After:
<script type="text/ng-template" id="deletePopover.html"><div>Sample template.</div>
</script>
As Angular UI Bootstrap doesn't have a dependency on jQuery, I don't know why this is an issue and as I haven't really looked into why this works, I thought I'd post it in the meantime.

Had the same problem. Resolved changing the order of loading jquery and bootstrap. Now I load bootstrap and then jquery and it seems to solve it. But strange nonetheless.

Just want to point out that it seems that the root of the requirement is that the string must start with a < character. So you don't actually need to stick the whole thing on a single line (which isn't very nice for a more complicated template). The following works for me:
<script type="text/ng-template" id="template.html"><span></span>
<div>
Hello there
</div>
</script>
Having the <span></span> immediately after the opening <script> allows the rest of the template to be rendered as HTML.

Typeahead not recognized inside ng-view

I have two files. One is an index.html, which essentially is the frame for my website, and the other a main.html which holds the template for my homepage. I have the following code right before all my scripts are imported.
<div class="container">
<div class="well" ng-view=""></div>
<div class="footer">
<p translate="footer">Well hello there Mr. Footer</p>
</div>
</div>
All my typeahead and controllers are imported in my scripts. This defaults to pulling my main.html because of the routed controller. The issue is that when I put the following code into my index.html, the typeahead works fine, but as as soon as I move it into my main.html it stops working. All of my javascript is being ran from files, so it shouldn't be a conflict of which loads first... Thoughts?
<div ng-controller="employeeController">
<table>
<center>
<div id="the-basics">
<input type="text"
ng-model="text"
ng-change="get(text, 'name')"
class="typeahead"
id="search"
placeholder="Search Employees..."/>
</div>
<button class="btn btn-primary btn-md" ng-click="get(text, 'name')">
<span class="glyphicon glyphicon-search"></span>
</button>
</center>
</table>
</div>
Here is a somewhat similar question that was never answered:
Bootstrap Typeahead Not Registering in AngularJS ng-view

I was able to resolve this issue by putting another script import for the controllers directly into the main.html.

AngularJS errors in IE8

I am working with a new angular app and need to make it backward compatible to IE8. From what it looks like it loads in my routing info, loads the template (to a point) but in the concole log i see the following error.
TypeError: Object doesn't support this property or method <div
class=ng-scope ng-view>
This is what my index html page looks like:
<!DOCTYPE html>
<html id="ng-app" ng-app="app">
<head>
<!--Add dependencies-->
<script src="jquery.min.js"></script>
<link rel="stylesheet" src="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="ui-bootstrap.js"></script>
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('menu');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
</head>
<body>
<div id="wrapper">
<header class="header header-fixed">
<section class="navbar navbar-inverse docs-navbar-primary">
<div class="container">
<div class="row">
<div class="col-md-7" style="color:white; margin-top:14px;">Thinflash: Fullscreen Demo</div>
</div>
</div>
</section>
</header>
<section role="main" class="container main-body">
<div ng-view></div>
</section>
<!--Add AngularJs Files-->
<script src="swfObject.js"></script>
<script src="app.js"></script>
<script src="appControllers.js"></script>
<script src="thinflash.js"></script>
</div>
</body>
</html>
Template.html :
<div ng-controller="thinflash.controllers.playback">
<div ng-controller="app.controllers.fullscreen">
<div class="mainWrapper" id="stageWrapper">
<label>SWF Object Display </label>
<div class="swfWrapper" style="width:320px; height:240px;" id="swfStage">
<div class="tf-container" tf-swf tf-interface="flashInterface" tf-src="thin.swf" tf-min-version="11.0.0"></div>
</div>
</div>
<div class="col-md-5">
<form role="form">
<!-- Video Playback Controls -->
<div class="row">
<div class="form-group col-md-7">
<label>Select Preloaded Video:</label>
<select class="form-control" ng-model="myVideo" ng-init="myVideo = videos[2]" ng-change="changeVideo(myVideo)" ng-options="v for v in videos"><option></option></select>
</div>
</div>
<div class="row">
<div class="form-group col-md-7">
<button type="button" class="btn btn-primary" ng-click="pausePlaybackToggle()">Pause</button>
<button type="button" class="btn btn-primary" ng-click="playVideo()">Play</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-7">
<label>Volume Control:</label>
<input style="width:50%;" type="range" id="slider" min="1" max="100" step="1" ng-model="volume" ng-change="changeVolume()">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label>Size Controls:</label><br/>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(1)">Small</button>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(2)">Medium</button>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(3)">Large</button>
</div>
</div>
</form>
</div>
</div>
</div>
Again when the app loads in IE8 it appears that the template loads (or starts too ... but i get this error)

Add html5 support for IE8 by using something like html5shiv or this little snippet:
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('menu');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
Edit
Fixing an "Object does not support this method or property" on IE can be a beast, cause it isn't telling you anything. It's not telling you what object, it's not telling you what property, it's not telling you what method and worst of all it's not telling you where this actually occurred. See the pattern? Effectively it's saying; something bad has happened somewhere, go figure. This is one of the reasons why everyone loves IE.
Adding the above snippet has probably solved a problem but then another problem popped up, which produced the same brilliant error message. Fixing this breadcrumb adventure of error messages by posting each new involved piece of html can take a very long time and should rather be discussed with the helpdesk of IE. They have an answering machine telling you to upgrade to their new crappy box of other issues. Troubleshooting this problem via Stackoverflow is like shooting satellites out of the sky with a water pistol, in the dark, blindfolded and drunk.
Some other things you might consider:
Move the snippet to above any other script include
Replace the snippet with html5shiv
Downgrade the include version AngularJS. Version 1.1.5 seems to work for IE7. Version 1.3 does not support IE8 at all.
Check the guide lines of Angular IE compatibility
Start commenting code (javascript/html) to better isolate the part that is causing the problem. Keep in mind that multiple problems generate the same error message in IE.
Upgrade to their new crappy box of other issues.

I wanted to take a second and answer this incase someone else has the same type of thing happen. I tried to polyFill and that didnt work so I tried running the code in IE9 while running in IE8 mode hoping to get a different error .... Voila ....
null hit the nail on the head ... it was in the JS and it was because I was doing document.addListener(). Luckily I was able to quicly decide that the functionality that this supported was not important enough to pull my hair out so i removed that line in my js...
Everything else worked .... Hopefully this can be of some help to someone in the future as IE provides stellar error messages