Below is the code using ng-init:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
Below is the code using ng-bind:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-bind="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
Both give the same output, with different formats.
What exactly is happening here ?
Please help!
The purpose of ng-init is initialize a property in template.
The purpose of ng-bind is replace the text content of the specified HTML element with the value of a given expression.
But you should initialize the variable in controller and use {{variable}} and don´t use ng-init or ng-bind for this.
ng-bind and ng-init have very different use cases.
ng-bind is for assigning inner text to element, like:
<div ng-bind="'hi'"><div>
results in:
<div>hi</div>
ng-init directive is executed once and is mainly useful for declaring variables. So in your case you shall use ng-init.
Related
I need to pull the sku (CS060120) from this section of html (edit:) Using VBA
tried getAttribute and getElementsbyTag(and Class)Name but I am not able to get the return I am looking for. Anyone know how to do this?
<section class="product_options">
<header>
<h1>
60' x 120' NiceRink CS Liner
</h1>
</header>
<vue-product-options
v-bind:product-opts="[]"
v-bind:configurable-payload="{"product_option":{"extension_attributes":{"configurable_item_options":[]}}}"
v-bind:liner-types="{"good":16,"better":14,"best":15}"
v-bind:is-folded-or-rolled-liner-sku="false"
v-bind:bundle-payload="{"product_option":{"extension_attributes":{"bundle_options":[]}}}"
v-bind:tier-prices="[]"
v-bind:is-wholesale-only="false"
v-bind:prices-index="{}"
v-bind:options-map="{}"
v-bind:is-configurable="false"
v-bind:is-rink-liner="false"
v-bind:is-liner-sku="true"
v-bind:is-bundle="false" product-type="undefined" price="612" sku="CS060120" image="https://www.nicerink.com/media/catalog/product/l/i/liner_1.jpg" magento-base-url="https://www.nicerink.com" name="60' x 120' NiceRink CS Liner">
</vue-product-options>
<div class="product_options_panel package_cta">
<h3>
Looking for a full Rink Package?
</h3>
<p>
We've got you covered!
</p>
<a class="button dark" href="/rink-builder">
Rink Packages
</a>
</div>
</section>
This is what I'm trying:
ieDoc.getElementsByClassName("product_options")(0).getAttribute("sku")
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($(".sdfv").attr("sku"));
});
});
</script>
</head>
<body>
<vue-product-options class="sdfv" sku="CS060120"></vue-product-options>
<button>Click the button to get sku value</button>
</body>
</html>
Try using attribute selector
Debug.Print ie.document.querySelector("[sku]").getAttribute("sku")
If you need to be more specific you can add the type selector so it becomes
Debug.Print ie.document.querySelector("vue-product-options[sku]").getAttribute("sku")
I would just like to know how to display AngularJS in Angular 2+ (I have a very unique situation that requires this)
So far this is what I have tried:
https://stackblitz.com/edit/angular-wbbzbz?file=src/app/app.component.ts
To give you an idea of what is happening on stackblitz:
I have a basic html string (which I got from here: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_default):
myHtml = `
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
`;
And through a pipe, I display it using:
<div [innerHTML]="myHtml | pipeSanitizeHtml"></div>
But I end up having this (broken AngularJS):
AngularJS will work if you put this in your Angular 2+ index.html's header:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
I am working on a static template and decided to use handlebars and gulp to generate the html part.
I have read several examples and I understand the concept of importing a partial like:
partial.hbs
<h1>Contents of the partial</h1>
index.hbs
<html>
<head></head>
<body>
{{> partial }}
</body>
</html>
which would yield:
<html>
<head></head>
<body>
<h1>Contents of the partial</h1>
</body>
</html>
What I can't seem to find is extending a base file instead of importing into it. What I mean is this:
base.hbs
<html>
<head></head>
<body>
{{ contents }}
</body>
</html>
index.hbs
{{extend base}}
{{ contents }}
<h1>Contents of the partial</h1>
{{ end contents }}
What is the proper way to do this in handlebars?
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
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.