How to write the Angular js codes in jsfiddle? - angularjs

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/

Related

Having trouble with implementation

I have spent 2 hours + on the lightbox. I have checked paths to CSS and Javascript. I have used both the included jquery and Google's imported JQuery.
When I click an image it opens a new window with that image larger on a white background. I want it to overlay the current page with <> and x.
You can see an example: http://demopbdesignsource.tierstrategies.com/a.aspx
Thanks
Looking at your code on your page I do not see where you are calling the lightbox.js script - that needs to be called right before the body close tag.
Also lightbox help states : If you already use jQuery on your page, make sure it is loaded before lightbox.js. - ◦Include the Javascript at the bottom of your page before the closing /body tag:
I used the lightbox-plus-jquery.js and called that just before the close of the body tag and it worked. I called the lightbox-plus-jquery.js just before the close of the body tag because it has both jquery and lightbox combined.
I am still working on the page and I am just using html not .net but the lightbox would work the same. If you look at my source you will see the script call right before /body tag.
http://just-in.com/recycledDresser/index.htm
Hope this helps.
Debra W.
You need to call the Lightbox script.
Something like
Placing it in the line before the line works for me.
Both
http://demopbdesignsource.tierstrategies.com/X/LightBox.css
and
http://demopbdesignsource.tierstrategies.com/X/LightBox.js
cannot be found.
The link provided in the question is giving 404 right now.
but I think you just need to follow the steps given at
http://lokeshdhakar.com/projects/lightbox2/
to set up lightbox.
you may have missed either of the following :
Include the CSS at the top of your page in your <head> tag:
<link href="path/to/lightbox.css" rel="stylesheet">
Include the Javascript at the bottom of your page before the closing </body> tag:
<script src="path/to/lightbox.js"></script>

Most basic Angular demo not working

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

Show directive as result of a click

I want to show content that comes from a directive when the user clicks on a link.
<li>Show popup</li>
Obviously I'm new to angularjs. I know the approach above doesn't make sense really but I was also trying to imagine how this might be done with ng-if but not coming up with anything. Any ideas? Thanks!
Edit 1: The directive that I want to use is:
<ng-pop-up></ng-pop-up>
That's part of ngPopup.
Edit 2: This is now resolved. It turns out that in the case of ngPopup, you put the directive somewhere, then you open the dialog using the open method, so I really didn't take advantage of the solutions given here. Giving Martin credit because his solution solves problem originally stated. Thanks all.
Not exactly sure what you are looking for.
When you say, content from a directive, is this an existing directive, or do you think the content should come from a directive?
In your example where you have show popup, do you mean you would like to have a dialog displayed when you click the link?
Or do you just want something like the following example?
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=app>
<a href="#" ng-click='showMessage = true'>Click Here</a>
<div ng-show="showMessage">Your Message Here</div>
</div>
Try looking at using ng-if (AngularJS docs). You can use a boolean in your scope to that is toggled by the ng-click.

Using angular js form validations in <form:input> tag

I have created a jsp page having a spring form. I want to validate the form using angular js. When I try to add required and ng-model attributes inside <form:input> tag, I'm getting exception Jasper exception equal symbol expected and Attribute ng-model invalid for tag input according to TLD in the line where i added these attributes.
What is the procedure to make my logic work?
There are 4 things you can try:
First one: Probably the neatest, and I think this should work:
<form:input path="usrname" maxlength="12" required="required"/>
So required='required' instead of just required
Second one: Forget about Angular Validation, and use Spring Validation methods. Maybe this isn't the thing you're searching for.
Third one: Isn't it possible for you to forget about <form:input> tags, and use <input> tags instead? Maybe not.
Fourth one: You can try to give your form:input tag an id, and at the bottom of your page, run a simple jQuery script. I know, this isn't the neatest thing to do, but maybe it works.
<html>
<body>
<form:input path="someinput" id="someinput"/>
</body>
<script>
$("#someinput").attr('required', '');
</script>
</html>
Please mark this as an answer if this helped you.

ng-include onload not working anymore in angularjs 1.2.0 rc

I am using angular's ng-include like this :
main html:
<span ng-include="'tpl.html'" ng-controller="TplCtrl" onload="loadMe()"></span>
template tpl.html:
<h2>{{ tplMessage }}</h2>
the controller:
$scope.loadMe = function () {
$scope.tplMessage = 'template';
}
})
this was working fine with angularjs 1.1.5 but not anymore in 1.2.0 rc 3
here is a plunkr :
http://plnkr.co/edit/zYRevS?p=preview
any idea how to make this work with 1.2.0 ?
edit:
i saw this : https://github.com/angular/angular.js/issues/3584#issuecomment-25279350
but can't find the answer to this problem here.
ok i found the answer here : https://github.com/angular/angular.js/issues/3584#issuecomment-25857079
ng-include can't be on the same element as ng-controller. In 1.1.5, it was working
here is a working updated plunker with an html element wrapping the ng-include:
http://plnkr.co/edit/CB8jec?p=preview
It seems to have to do with you mixing 2 things on the same tag - it has both ng-include and ng-controller on it. put your span inside of a new one and move the ng-controller to the outside tag.
They might'of changed the order in which these attributes are processed. In general I think mixing them on the same tag is not a good idea.
Because it's just broken, and there is currently no workaround.
According to the change long:
"previously ngInclude only updated its content, after this change ngInclude will recreate itself every time a new content is included. This ensures that a single rootElement for all the included contents always exists, which makes definition of css styles for animations much easier."
but instead of being improved, it appears to have been broken.
According to the comments here the current implementation is broken.
Other sources will tell you the same.

Resources