I'm a beginner with AngularJs, this is my first try
I'm trying ti display data from a json link, and some fields contains html
Here is the json content :
[{"titre":"Titre18","description":"<p>test<\/p>"},{"titre":"Titre18f","description":"<p>sdfsdfsd<\/p>"}]
And i use this angularJs code to display the data
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{x.titre}}
{{x.description}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("JSONLINK")
.success(function (response) {$scope.names = response;});
});
</script>
The problem is, the field description is displayed as is in the json :
- Titre18 <p>test</p>
- Titre18f <p>sdfsdfsd</p>
Is it possible to format this field as html ? I want the p tags to be interpreted as html
I use angularJs 1.3.15
Thanks a lot
Try this:
<ul>
<li ng-repeat="x in names" ng-bind-html="x.description">
{{x.titre}}
{{x.description}}
</li>
</ul>
Now notice ng-bind-html will evaluate the HTML in 'description' contents and render it 'safely', there is also ng-bind-html-unsafe if you want to bypass Angular's sanitize method. But be careful when using those, considering a wrong '>' symbol can break your entire page.
You also need to add a dependency on ngSanitize on your module.
angular.module('yourmodule', ['ngSanitize']);
Requires angular-sanitize.js
docs: https://docs.angularjs.org/api/ngSanitize
And here is documentation for bind-html
https://docs.angularjs.org/api/ng/directive/ngBindHtml
here is link to the code at plunker.a link!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example62-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular-sanitize.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="bindHtmlExample" >
<div ng-controller="ExampleController">
<ul>
<li ng-repeat="x in names" ng-bind-html="x.description">
{{x.titre}}
{{x.description}}
</li>
</ul>
</div>
</body>
</html>
in script.js
(function(angular) {
'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.names =[{"titre":"Titre18","description":"<p>test<\/p>"},{"titre":"Titre18f","description":"<p>sdfsdfsd<\/p>"}];
}]);
})(window.angular);
Here you will see p tags are interpreted as html not as string.Hope this will help you
If I understand right, you want to strip the tags around the description text. See this link : angularjs to output plain text instead of html
Related
Today I started fiddling with AngularJS for school. Almost instantly I got to a problem I cannot fix, and solutions on the internet did not help me.
I use a angular-seed project as skeleton of my project.
This results in two files in particular: the app.js and the view1.js which contains the controller I am using in my view1.html.
The idea is that I need to have an array of items that I can use globally on multiple views, so not necessarily only on view 1.
I made a controllers.js with the following content:
var todoAppControllers = angular.module('CarControllers', []);
todoAppControllers.controller('CarListController', ['$scope', '$http',
function($scope, $http) {
$scope.cars = [
{merk:'volkswagen', model : 'Up'},
{merk:'volkswagen', model : 'Golf'}
];
}]);
My html looks like this on the main index.html (I've ommitted some irrelevant code):
<html lang="en" ng-app="carApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
</body>
</html>
My app.js:
'use strict';
// Declare app level module which depends on views, and components
angular.module('carApp', [
'ngRoute',
'carApp.view1',
'CarControllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
And finally the page where I want to show my list of cars. Not that this is a partialview:
<p>Cars:</p>
<ul ng-controller="CarListController">
<li ng-repeat"car in cars">{{car.merk}} model: {{car.model}}</li>
</ul>
When I run npm and go to the application, I only see one bulletpoint (list item) with only model: (so no merk which is brand in Dutch nor the car.model).
How can I solve this? Thanks in advance
You have this:
<li ng-repeat"car in cars">
You're missing an equal symbol:
<li ng-repeat="car in cars">
hello I am new on angular and i come again to have some help.
I try to get datas from a json file : teams.json but it doesn't work
my controller is like this :
app.controller('TeamController', ['$http', function($http){
var liste = this;
liste.teams = [];
$http.get('teams.json').success(function(data){
liste.teams = data;
});
}]);
and in my html :
<!DOCTYPE html>
<html ng-app="teamStats">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="TeamController">
<!--
%%%%%%%%%%%%%%%%%%%%%%%%%%% BODY CONTENT
-->
<div id="wrap" >
<div class="container">
<div >
<ul>
<li ng-repeat="team in liste.teams">{{team.name + team.win}}</li>
</ul>
</div>
</div>
</div>
<!--
%%%%%%%%%%%%%%%%%%%%%%%%%%% END OF BODY CONTENT
-->
</body>
</html>
Many thanks in advance ! hope someone see where i am wrong
I did a plunker for easier understanding
myPlunker
Best regards,
Vincent
Change your controller to this
app.controller('TeamController', ['$http', '$scope',
function($http, $scope) {
var liste = this;
$scope.liste = {};
$scope.liste.teams = [];
$http.get('teams.json').success(function(data) {
$scope.liste.teams = data;
});
}
]);
And fix your json file. You need to remove the additional ,s
Demo: http://plnkr.co/edit/jeHnvykYLwVZLsRLznRI?p=preview
Ok i think i know now why it doesn't work !! ng-repeat, ng-view, ng-include and others use AJAX to load templates. The problem is that the browser by default does not allow AJAX requests to files located on your local file system (for security reasons). Therefore you have two options:
Run local web server that will serve your files
Tell your browser to allow local files access
Thanks for help all !! Thanks to Vadim explanation !! And thanks a lot zsong ! :)
Maybe is a stupid question but I'm really new with Angular and trying to pick up some knowledges. So I have a scope which I get via API ($http) and after conversion is a html markup
<li>some list</li>
and I would like to project this one in DOM, trying
<ul>{{myscopevariable}}</ul>
but I get just the raw text
with php would be like <ul><?= myscopevariable ?></ul>
JS
angular.module("myApp", ["ngSanitize"]).controller("MyCtrl", function($scope){
$scope.someHTML = "<li>just testing</li>";
})
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>
<ul ng-bind-html="someHTML">
</ul>
</body>
</html>
http://plnkr.co/edit/e1zoOrEVwqdIDPujMpPC?p=preview
Use the ng-bind-html directive (Documentation here). Prior to 1.2 there also existed ng-bind-html-unsafe.
In your example:
<ul>some list</list>
<li ng-bind-html='myscopevariable'></li>
....
</ul>
You have to include the ngSanitize module to have it work (e.g. <script src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script> in Header and var app = angular.module('plunker', ['ngSanitize']);)
See this plunker example for some working code.
I am trying to learn about angular Directives and following the example given in here (http://docs.angularjs.org/guide/directive), have written the below code. Could anyone please guide me as what am i doing wrong that the data from the scope of the controller is not being read in the directive? The site says nothing about it! And there is no error upon executing the code, it just does not display any data. Please help.
//My Html
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<title>Angular Directives</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body >
<div data-ng-controller = "MyCtrl"></div>
<div data-template-expanding-directive></div>
<script src="lib/angular.js"></script>
<script src="js/templateExpandingDirective.js"></script>
</body>
</html>
//My JS
'use strict';
var myapp = angular.module('MyApp',[]);
myapp.controller('MyCtrl',['$scope',function($scope){
$scope.customer = {
name: "Jenny",
place: "England"
};
}])
.directive('templateExpandingDirective',function(){
return {
template: 'Name: {{customer.name}}'
};
});
Regards
The directive is currently out of controller scope. So you need to have directive inside the controller scope. The html should be like this -
<div data-ng-controller = "MyCtrl">
<div data-template-expanding-directive></div>
</div>
If you do not move the directive element inside the controller div element then you can either have one more parent 'div' element or access the data from global root scope.
The following code displays only the input box when run in the browser (Chrome). It seems to have broken when I attempted using the ng-controller directive.
<!doctype html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"> </script>
<script>
function SController($Scope) {
$Scope.customers =
[{name:'John Smith',city:'Kingston'},
{name:'Jane Doe',city:'Ocho Rios'},
{name:'Brian Wade',city:'Negril'},
{name:'John Barker',city:'Mandeville'} ];
}
</script>
</head>
<body ng-controller="SController">
<div class="container">
<input type="text" data-ng-model="name"/>
<ul>
<li ng-repeat="person in customers | filter:name | orderBy:'city'">{{ person.name}} - {{ person.city }} </li>
</ul>
</div>
</body>
</html>
Well, at first sight, it seems that you're using $Scope instead of the correct $scope. Replace those occurrences and try again.