Here is the text I am trying to clean up:
Infographic: What is BPA? Why does it get such a bad rap? Discover more about it in our
infographic - Why BPA will not kill you. (See a larger version here: <a
rel="nofollow">https://www.containerandpackaging.com/sam/blog/infographics/infographic_
WhyBPAWontKillYou.jpg</a> )<br/><br/><a rel="nofollow" target="_blank"
href="http://www.facebook.com/containerandpackaging/photos/a.268688407811.176198.266913
322811/10152627992307812/?type=1&relevant_count=1" id="" title="" style=""><img
class="img" src="http://sphotos-e.ak.fbcdn.net/hphotos-ak-xpa1/v/t1.0-
9/s130x130/10600407_10152627992307812_1312617274906388391_n.jpg?
oh=505a27309629d804d894521dc035bce2&oe=5459BBC9&__gda__=1413295158_68fb27fae5cc75b8264a
8f5912613fc5" alt=""/></a><br/>
Here is my original javascript code:
var content = item.description.replace(/]*>/g,"").replace(/\/g, "");
content = stripHtml(content);
The output looks something like this:
Infographic: What is BPA? Why does it get such a bad rap? Discover more about it in our infographic - Why BPA will not kill you. (See a larger version here: ht...
Is there a way to do this in angular?
Use Angular's $sanitize service
AngularJS uses JavaScript as a base, and it doesn't have anything special to strip HTML, so you should keep using your javascript.
Since Angular includes jQuery this is easy. Put the HTML in a container you can target like and use the jQuery method .text(). Here's the code:
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
$(document).ready(function() {
$("#new").val($("#original").text());
})
</head>
<body>
<div id="original">
Infographic: What is BPA? Why does it get such a bad rap? Discover more about it in our
infographic - Why BPA will not kill you. (See a larger version here: <a
rel="nofollow">https://www.containerandpackaging.com/sam/blog/infographics/infographic_
WhyBPAWontKillYou.jpg</a> )<br/><br/><a rel="nofollow" target="_blank"
href="http://www.facebook.com/containerandpackaging/photos/a.268688407811.176198.266913
322811/10152627992307812/?type=1&relevant_count=1" id="" title="" style=""><img
class="img" src="http://sphotos-e.ak.fbcdn.net/hphotos-ak-xpa1/v/t1.0-
9/s130x130/10600407_10152627992307812_1312617274906388391_n.jpg?
oh=505a27309629d804d894521dc035bce2&oe=5459BBC9&__gda__=1413295158_68fb27fae5cc75b8264a
8f5912613fc5" alt=""/></a><br/>
</div>
<textarea id="new" cols="40" rows="10">
</textarea>
</body>
</html>
Here's a working example: http://jsbin.com/xovijoko/1/edit?html,js,output
Related
Consider this code snippet:
<div id="accordion">
<h3>TEST</h3>
<p>Lorem ipsum</p>
<script>some JS code </script>
</div>
Once accordion is initialised, JS code is becoming a part of output. I can see that is being added some accordion attributes. How do I make accordion to ignore as part of visible data and keep it as a script instead?
My code is auto-generating each accordion panel and some JS functionality is built as part of it, hence the problem.
Thanks,
Rudolf
Why is it one comes up with an answer right posting on the forum?
Anyway, my solution is:
<div id="accordion">
<h3>TEST</h3>
<p>Lorem ipsum</p>
<script class="ignore">some JS code </script>
</div>
<script>
$( function() {
$( "#accordion" ).accordion({
header:'h3:not(.ignore)'
});
Not sure if this is a good way, but seem to work.
I am open to suggestions on a better way to implement what I need.
Rudolf
With (fa) previous version (4), icon updated succesfully after a change in the app.layout.isSmallSidebar variable, but now (veriosn 5) it does not. It seems to have something to do with the way it is rendered...
Any ideas why? and how to solve this issue?
Thanks in advance!
I've been searching for this same solution (I think) for a few days. In fact, no NG tags seem to apply to FA5 and I believe I've found why. According to FA5 install instructions, you are to include a js script in lieu of a stylesheet. The js script is changing all the new FA icons to SVG at runtime and thereby changing their reference on your dom. This makes your NG tag apply to something that no longer exists.
The solution to this is to include:
<link href="//use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
instead of what I suspect you're using:
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
This is what georgeawg is using in his sample and that's why it works.
Font Awesome 5 works with ng-class in:
This DEMO
<link href="//use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
<fieldset>
<i class="fa" ng-class="{'fa-times': selClose,
'fa-image': !selClose}">
</i>
Selectable icon
</fieldset>
<input type=checkbox ng-model="selClose">Select close icon
<fieldset>
<i class="fa fa-times"></i>
</fieldset>
<fieldset>
<i class="fa fa-image"></i>
</fieldset>
</body>
I have started angularjs very recently and i have found these two ways of using controllers.
This one does not give me any output
<html ng-app="">
<body>
<div>
Name : <input type="text" ng-model="name">
{{name}}
</div><br>
<div ng-controller="SimpleController">
<ul>
<li ng-repeat="cust in customers">
{{cust.city}}
</li>
</ul>
</div><br>
<script src = "D://angularJs/angular.min.js"></script>
<script>
function SimpleController($scope){
$scope.customers = [
{names:'Arjun Narahari',city:'Mumbai'},
{names:'Santosh Rangarajan',city:'Pune'},
];
}
</script>
This one gives me proper output
<html ng-app="myApp">
<body>
<div ng-controller="SimpleController">
<ul>
<li ng-repeat="cust in customers">
{{cust.city}}
</li>
</ul>
</div><br>
<script src = "D://angularJs/angular.min.js"></script>
<script>
angular.module("myApp",[]).controller("SimpleController",function($scope){
$scope.customers = [
{names:'Arjun Narahari',city:'Mumbai'},
{names:'Santosh Rangarajan',city:'Pune'},
];
});
</script>
Output
Mumbai
Pune
Can anyone explain me why the first way does not work ?
Thank you
As you can see, the second has this extra code
angular.module("myApp",[]).
which actually sets up Angular. Without it, function simpleController() is sitting there with nothing using it
The first version, using a global function, was the most basic example for a long time with Angular, but as of version 1.3 it has been disabled.
Now the only way to define a controller is as in your second example.
Basically the first way was only ever used for basic tutorials. Apps of any size generally don't want to be filling up the global scope and design for better modularity. So as much as the second option feels like you are doing more for no reason at the moment, you will appreciate it as your app grows!
I am experiencing some troubles trying to get ng-tags-input to work.
I am trying to a custom template for my tags, and my code is barely what the developers show in the demos.
Everything works fine, except for the fact that my custom template is ignored (see the code below ).
Am I missing anything trivial? Why are tags still shown with the default template?
Background: App built in Angular (with routing), and Bootstrap. The code below is in one of Angular views.
Code:
<div class="form-group">
<label for="tags">Tags</label>
<tags-input ng-model="tags" name="tags"
display-property="name"
id="tags"
template="tagtemplate">
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
<script type="text/ng-template" id="tagtemplate">
<div class="tag-template">
<span class="label label-info tag">
{{$getDisplayText()}}
<a class="remove-button" ng-click="$removeTag()">✖</a>
</span>
</div>
</script>
</div>
Then then answer is #MichaelBenford's comment. The code works fine with version 2.3.0.
Hi all you experts out there.
My testing area: http://plnkr.co/edit/ddJT1e4a8L5NTSIVNTk7
I am trying to visualize hierarchical data in a tree-form with Angular, even though i'm using some samples to aid me in my quest (like http://jsfiddle.net/alalonde/NZum5/ and http://jsfiddle.net/brendanowen/uXbn6/8/) i fail.
As soon as i place the recursive element ng-include inside the ng-repeat in side the template it self, the memory usage of its browser-window goes through the roof and effectively hangs the browser. But the available tree-sample i could find are doing just that.
What am i missing?
You need to use the same variable name in the template. The current node is called node in the controller then child in the template.
This cause the template to render the same node over again.
It works fine if you use the same variable name :
<li ng-repeat="node in node.children" ng-include="'node.html'"></li>
See it in action here : http://plnkr.co/edit/mjfdSEDcMK8kGCRjS6V6?p=preview
If anyone here wants to avoid having the extra ng-repeat outside of the template (where it kind of includes stuff from the template anyway), here's a fiddle showing how to do it:
http://jsbin.com/hokupe/1/edit
Also here's a blog post and a 10-15 minutes video on how it works:
http://gurustop.net/blog/2014/07/15/angularjs-using-templates-ng-include-create-infinite-tree/
Sample Code:
<script type="text/ng-template" id="treeLevel.html">
<ul>
<li ng-repeat="item in items">
<input type="checkbox"
name="itemSelection"
ng-model="item._Selected" />
{{item.text}}
<div ng-include=" 'treeLevel.html'"
onload="items = item.children">
</div>
</li>
</ul>
</script>
<div ng-include=" 'treeLevel.html' "
onload="items = sourceItems">
</div>