I have AngularJS web app, which is capable of sending different http methods to our Restful WS. Each request has a preview, where all of it's properties are listed and can be changed in place. Everything works fine except the formating for inputing JSON. It looks like this:
And I would like it to look like this, except that JSON text was displayed like in picture 1:
Shortly, I need that the left side was as in 1 pic, and the right side - as in the second pic.
Here's piece of code, which is responsible for generating input for JSON:
<div ng-show="field.restResourceName != null">
<p ng-show={{field.isRequired}}>{{field.name}}*: </p>
<p ng-show={{!field.isRequired}}>{{field.name}}: </p>
<accordion id="entityField" close-others="oneAtATime">
<accordion-group heading={{field.name}} is-open="false">
<p>JSON:</p>
<textarea ng-change="getCreateEntityAsText()" ng-model="createEntityResource[field.name]"></textarea>
</accordion-group>
</accordion>
</div>
And here's the one, responsible for showing the output:
<div class="preview">
<p>Preview: </p>
<textarea class="form-control" ng-model="createEntityTextAreaModel"></textarea>
</div>
AngularJS controller functions, which parse JSON into model and vice versa:
//CREATE ENTITY JSON PARSE
$scope.getCreateEntityAsText = function () {
$scope.createEntityTextAreaModel = JSON.stringify($scope.createEntityResource, null, " ");
};
$scope.$watch('createEntityTextAreaModel', function () {
applyParseValues($scope.createEntityTextAreaModel, $scope.createEntityResource);
});
applyParseValues = function(textAreaModel, entityModel){
if($rootScope.isNotEmptyString(textAreaModel)) {
angular.copy(JSON.parse(textAreaModel), entityModel);
} else {
angular.copy({}, entityModel);
}
}
Any ideas how this can be achieved? Every useful answer is highly appreciated and evaluated.
Thank you.
It looks like you're mostly having a styling issue, which is addressed in this question:
JSON formatter lib
Otherwise, Angular comes with a built-in filter for JSON, which can be used in a view like this:
<p>{{someObject | json }}</p>
Links:
https://docs.angularjs.org/api/ng/filter/json
https://docs.angularjs.org/api/ng/filter/json
Related
This is my first question here and I'm only asking because I really couldn't find an answer anywhere - or couldn't figure out how to make it work for me at least (I'm a huge noob when it comes to HTML and Ionic).
Here's the thing:
I'm using Ionic and I want to make a text variable work as an HTML object. Instead, it ends up being merely displayed as text (with tags and everything) on the page.
TypeScript (dice.ts)
export class Dice {
...
dice = 4;
result = 0;
teste = "<h2>Teste</h2>";
...
HTML (dice.html)
<ion-content padding>
<h1> TITULO </h1>
{{teste}}
...
</ion-content>
Outcome
TITULO
<h2>Teste</h2>
In other words, it did not create a "header2", but just showed the original string.
You can try something like this:
<ion-content padding>
<h1> TITULO </h1>
<div ng-bind-html-unsafe="teste"></div>
</ion-content>
also, some more reference: AngularJS : Insert HTML into view
Ogari,
Please try
<div [innerHTML]={{teste}}></div>
You will find more about this at this link
I am in beginning of a web project and I want to read my web site stings such as labels, title of pages, placeholder and ... from a json file. i think this approach may help me to increase my speed in changes and create a multi language web site.
is there any jquery library for doing this? and if ther is not how can i do this work by jquery?
You can make mustache templates and populate them with data using handlebars.js:
http://handlebarsjs.com/
Mustache templates use curly braces as placeholders and handlebars uses the json format to hold the data. It could look something like this (though not a full working example):
HTML:
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
Javascript:
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
Result:
<div class="entry">
<h1>My New Post</h1>
<div class="body">
This is my first post!
</div>
</div>
Here is a working example: https://jsfiddle.net/k4u64exL/
What you're searching for is a Javascript/jQuery Template Engine - there are lot of them (start e.g. with http://www.sitepoint.com/10-javascript-jquery-templates-engines/ ).
If you want to write your own template engine try the following:
1) Fetch JSON-Data with Ajax
2) Fetch Template with Ajax
3) Apply variables from JSON-File to Template File (simple replace)
4) Append the result to the current page.
I am trying to decode html entities from a string using and Angular JS filter.
I have a view that looks like the following:
<div class="roboto medium-gray">
<span class="item-description">{{item.description | plaintext}}</span>
</div>
As of right now I am applying a filter that strips tags:
.filter('plaintext', function() {
return function(text) {
return text ? String(text).replace(/<[^>]+>/gm, '') : '';
};
})
I am trying to determine a way where i can decode any html enties that are in there.
item.description is "A large house with wrap around porch & pool"
right now after item.description gets passed through the plaintext filter it comes out as:
A large house with wrap around porch & pool
I want it to replace the & with &
Thank you for help in advance.
You can use ng-bind-html, like so:
<div class="roboto medium-gray">
<span class="item-description" ng-bind-html="item.description | plaintext"></span>
</div>
For more information see official API Reference.
I am using a cool little AngularJS filter for emoji characters located at: http://dev.venntro.com/angular-emoji-filter/ and this is my code I have so far.
<p class="chatmessage plain ng-binding" ng-repeat="message in messages track by $index" ng-model="message" ng-bind-html-unsafe="message | emoji">
<b>{{message.Author}}:</b>{{message.Message|emoji}}
</p>
It gives me the following output:
User123: <i class='emoji emoji_smiley'>smiley</i>
obviously, I'd rather have the emoji icon, but that is what gets output to the page. This is almost a win for me even at this stage as I had to figure out how to add all of the appropriate references to get the message filter to work and get this far. Now I am trying to come up with a way to make the "message.Message" render the HTML rather than just giving me the HTML code itself.
I am wondering if there is a function that I can wrap around that to force it to render this emoji rather than the HTML?
Thank you for any help
Sincerely,
New kid to AngularJS
I think you need to try with below ng-repeat code :
<p class="chatmessage plain" ng-repeat="message in messages track by $index">
<b>{{message.Author}}:</b><p ng-bind-html-unsafe="message.Message | emoji"></p>
</p>
Having trouble wrapping my head around something in Angular. I have a page where I list blog posts (or will, anyway). The posts are stored within a database. Angular gets them from a php script. That's all fine and dandy, but these blogs will understandably have tags (a, img, etc.) embedded in them. Angular doesn't seem to like that.
After searching around here I found an answer two the error produced when my blog posts had newline characters in them (the horror). (white-space: pre-wrap). I'm finding no such love with an embedded tag. Also, having a double quotation mark in a message results in the page not being rendered and an error in the console.
I'm sure this has been asked many times, but the search is only yielding me false positives. :(
EDIT: plunker or jsfiddle will require me to change the model a bit. Let me try this.
Here's the actual code.
<script>
function aboutController($scope,$http) {
var site = "http://onfilm.us";
var page = "/about.php";
$http.get( site + page )
.success(function(response) {
for ( i = 0; i < response.length; i++ ) {
console.log( response[i] )
}
$scope.data = response;
});
}
</script>
</head>
<body>
<script src="header.js"></script>
<div class="centered" style="top: 50px; width: 500px" data-ng-app="" data-ng-controller="aboutController">
<div class="" style="font-family: sans-serif;" data-ng-repeat="item in data">
<div class="text">{{ item.message }}</div>
</div>
</div>
</body>
You can see the output in action here:
http://onfilm.us/about.html
The troubling part would be in this snippit.
taken from Erick Kim's informative website ...
It shows up as string literal w/ the code above... not a link.
You can see the whole data it's reading in here if you want:
http://onfilm.us/about.php
To include html tags in your bindings:
Include angular-sanitize.js in your page:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-sanitize.min.js"></script>
Include the ngSanitized service in your app's dependencies. Do this where you define your module, like so:
angular.module('yourModule', ['ngSanitize'])
Use ng-bind-html to bind your data; so, replace:
<div class="text">{{ item.message }}</div>
with
<div class="text" ng-bind-html="item.message"></div>