I'd like to pass HTML back to the webpage but it is coming through as literal. Any ideas what I'm doing wrong?
HTML:
<div ng-app="app" ng-controller="ctrl">
{{price}}
<br>
Only <strike>$49</strike> $29
</div>
Angular:
var app = angular.module('app',[]);
app.controller('ctrl', function($scope,$sce){
$scope.price = $sce.trustAsHtml('Only <strike>$'+49+'</strike> $'+29);;
});
Output:
Only <strike>$49</strike> $29
Only $49 $29
Example: http://jsfiddle.net/eyks7zu9/3/
Below is your code, with a <span> tag added that has an ng-bind-html value. I could be totally wrong, as I'm not the best with angular myself, but I don't believe that what you are trying to do will work as you intend as Angular tries to keep the Sandbox model pretty rigid with regards to HTML injection.
var app = angular.module('app', []);
app.controller('ctrl', function($scope, $sce) {
$scope.price = $sce.trustAsHtml('Only <strike>$' + 49 + '</strike> $' + 29);;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<span ng-bind-html="price"></span>
<br>Only <strike>$49</strike> $29
</div>
Related
This is an AngularJS syntax question.
{ "key-part": "value-part" } is a valid JSON object. However, in AngularJS, {{ x.key-part }} is an expression. It does not return "value-part" but returns 0. Any idea how to escape the '-'?
Yes, you may ask why use "key-part" instead of "key_part". Well, I have no control over that.
Thanks for any help.
You can access attributes of an object like a standard Javascript object : https://www.w3schools.com/js/js_properties.asp
So <span>{{myObject['attr']}}</span> work
"use strict";
angular.module("demo", [])
.controller("MainController", MainController);
function MainController() {
var vm = this;
vm['da-ta'] = "data";
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="MainController as main">
<div ng-bind="main['da-ta']"></div>
</div>
Try {{ x["key-part"] }} instead of {{ x.key-part }}.
Working Demo
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.x = { "key-part": "value-part" };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
{{ x["key-part"] }}
</div>
I'm pulling in data from an external site using this code -
<script>
var app = angular.module('myApp', ["ngSanitize"]);
app.controller('aLlCtrl', function($scope, $http) {
var url = 'https://www.hcrlaw.com/wp-json/posts?filter[category]=news_post&filter[posts_per_page]=30';
$http.get(url).then(function(data) {
$scope.data = data.data;
});
});
</script>
<div id="changingArea">
<body ng-app="myApp">
<!--SHOOTING TYPE-->
<div id="All" class="descshoot">
<div ng-controller="aLlCtrl">
<div ng-repeat="d in data">
<h2 class="entry-title title-post">{{d.title}}</h2>
<p>{{d.excerpt}}</p>
</div>
</div>
</div>
I's pulling in fine, but how can I get rid of tags such as <p> appearing? For example -
I've seen ways in which people use ng-sanitise but from what i understand you have to specify each piece of text you want to target and this would be really inconvenient as it's pulling in lots of posts from Wordpress,
Any help would be much appreciated, thanks!
If i need to change a small html dynamically on or before a success or error callback of ajax in html I do
document.getElementById("xyz").innerHTML("<img />");
in jQuery also i can do
jQuery("#xyz").html("<img />");
now I can also use handlebars for doing more complex html and attaching it in the above code.
So how can I do the above such things in Angular.js
Please give some examples of some helpful pointers
using ng-bind-html like this,
html:
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
js:
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "<img />";
});
The problem, I have is AngularJS application is not updating the result when input changes in the input HTML field. If I turn this to auto bootstrapping it does work as expected. I do not know what am i doing wrong?
This is JS file.
angular.module('doublevalue', [])
.controller('DoubleController', ['$scope', function($scope){
$scope.value = 0;
$scope.double = function(value) { $scope.value = value * 2; }
}]);
angular.element(document).ready(function() {
var div3 = document.getElementById('App3');
angular.bootstrap(div3, ['doublevalue']);
});
JSFIDDLE version:
https://jsfiddle.net/as0nyre3/48/
HTML file:
<div id ='App3' ng-controller='DoubleController'>
Two controller equals
<input ng-model='num' ng-change='double(num)'>
<span> {{ value }}</span> </div>
Auto bootstrapping one link:
https://jsfiddle.net/as0nyre3/40/
Please help me!
This is working, with a problem like that you should always check your selectors
<div id="App3" ng-controller="myCtrl">
<input type='text' ng-model='name' ng-change='change()'>
<br/> <span>changed {{counter}} times </span>
</div>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('App3'), ['myApp']);
})
</script>
I'm new to AngularJS. I'm implementing ng-keypress events in AngularJS.
I referred to many blogs and tried to do as it is shown, but my code is not working!
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<input ng-keypress="change($event)" type="text" >
{{ text }}
</div>
</div>
script is:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.change=function($event){
$scope.text= 'a';
};
}]);
I'm trying to change the value of {{text}} on keypress.. but it's not working!
can anyone help me out!
Thanks :)
i tried the same things and its working
<body ng-controller="MainCtrl">
<input ng-keypress="change($event)" type="text" >
<pre>{{name}}</pre>
</body>
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.change=function($event){
$scope.name= 'hello';
};
});
checkout this plunker... PLUNKER LINK
EDIT
checkout your code plunker.. thats also working
EDIT
finally the answer is: 1.0.7 does not support ng-keypress, hence it was not working..
sometimes ng-keypress do not work on some browsers !!
i had the issue with the arrow keys in chrome
try ng-keydown instead (it worked for me )
As everyone else says it's working as it is supposed to do. Perhaps you want something like this?
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.text = '';
$scope.change=function($event){
$scope.text += String.fromCharCode($event.keyCode);
};
}]);