I'm following an online tutorial, and it says all I need is angularJs script, and a ng-app tag.
Following this: https://www.youtube.com/watch?v=RBhqLRoRDgo
So I tried it, but ... it seems the most basic part, I'm failing at:
http://plnkr.co/edit/aX8C3MTPh2fu3klt54Qk?p=preview
{{ 843 / 42 }}
That should show the answer, as opposed to showing a string.
What am I doing wrong?
You have coded in angular 1 version but you have added angular 2 scripts. In simplest case you can add prior version or write in 2 fashion.
https://angular.io/guide/quickstart
In your plunker code, it seems you are using angular 2 that needs more preparations, (see angular 2 quickstart).
replace the script tag with this one:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
First of all, the URL given in the script src is a 404. Also, you're using angular 1.x syntax in your code.
For coding in angular 2.x, you should have a look at this quick start: https://angular.io/guide/quickstart
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.
I'm using tidy-html5 from brew, and i can't tidy up my angular templates because they use custom elements like those :
<due-diligence-point index="1" title="Lead Screening">
This throws this error on tidy-html5 :
line 26 column 9 - Error: <due-diligence-point> is not recognized!
There is an option i'm skipping or this will just not work with tidy ?
The only option i have is to populate manually "new-empty-tags" ?
Little late to the party of one here but have you tried prefixing your element with the 'data-' tag? The following succeeds an HTML5 validator.
<!DOCTYPE html>
<html>
<head><title>asdf</title></head>
<data-custom-tag></data-custom-tag>
</html>
If you remove the data prefix however it will throw an error as an unrecognized element.
I've asked this before prettier existed, which completelly solves this kind of problem.
Please take a look at following plunker http://plnkr.co/edit/34JedA
It is a simple app with a ng-grid. What I need to do is navigate to the edit page when the edit button is clicked. What happens is instead of going to the edit page columns in the grid get messed up. Could anyone please explain why it is happening and what I could do to correct it.
There seems to be a problem with the ng-grid version you are using, I changed to the latest version I found and it worked.
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.8/ng-grid.debug.js"></script>
Example: http://plnkr.co/edit/5myA2K?p=preview
Do not include file with following header.
/***********************************************
* ng-grid JavaScript Library
* Compiled At: 04/22/2014 16:27
***********************************************/
instead of this, please add
/***********************************************
* ng-grid JavaScript Library
* Compiled At: 04/07/2014 16:55
***********************************************/
I learn the Angularjs these days, then I using the online fiddle.net to write the angular.js codes. At first because the jsfiddle need't write the html tag. so I don't know where I should put the "ng-app" command. The link that I share doesn't work, are you get the same question?
http://jsfiddle.net/liminjun88/Jh9K7/
function CartController($scope){
$scope.items=[
{title:'Paint pots',quantity:8,price:3.95},
{title:'Polka dots',quantity:17,price:12.95},
{title:'Pebbles',quantity:5,price:6.95}
];
$scope.remove=function(index){
$scope.items.splice(index,1);
}
}
click on frmaework and extensions; and choose instead of domready to No Wrap - in
You have it right, you just need to change when your script gets run, from the second dropdown in the upper left.
Here's the modified fiddle
No wrap - in <head>
You need to use AngularJS with option No wrap - in <body>
Here is the fixed JSFiddle: http://jsfiddle.net/tomepejo/mrX4L/
I want to make a simple use of the plugin x-editable, following step by step what's to do in the official doc.
It actualy worked fine when I was on Bootstrap 2, though, it doesn't work anymore on BS3 (even if I updated everything to the latest version etc.).
So when I click on the link to trigger the editable popover, I got this error in firebug :
TypeError: this.$element.data(...) is undefined
[...]/Bootstrap3/js/bootstrap-editable.js
Line 154
Which is actually this line :
this.$element.data('popover').tip().addClass('editable-popover');
Btw, I'm using CakePHP, all the plugins (js and CSS) are declared etc...
So I'm running out of idea, if someone knows about it, would be cool !
Thanks !
EDIT : Problem solved, just had to reload the cache... Old script was still in it so there was compatibility problems.
Did you download the latest Bootstrap 3 ready version from: http://vitalets.github.io/x-editable/assets/zip/bootstrap3-editable-1.5.0.zip
I didn't find any problem following the steps from http://vitalets.github.io/x-editable/docs.html. See: http://jsfiddle.net/xaRbU/
Note the examples use jquery-2.0.3 (the fiddle above works with 1.9.1). Since jQuery 2 doesn't support IE8 Bootstrap requires the newest 1.x version of jQuery, see also: Updating Bootstrap to version 3 - what do I have to do?
Code used:
html:
<div class="container">
<div class="row">
superuser
</div>
</div>
javascript:
$(document).ready(function() {
$('#username').editable();
});
css:
/* create some space cause the popup shows on the top of the element */
body{padding-top:100px;}