Well guys, first sorry if this is kinda poor, but this is my first question.
I'm trying to use angular js to generate a barcode using JsBarcode, but when I put the Angular code like {{y.code}}, the JsBarcode doesn't recognize and just shows me an empty space.
$
<html ng-app="myApp">
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-controller="myCtrl">
<div class="row" ng-repeat="y in teste">
<div class="col center">
<svg class="barcode" jsbarcode-format="EAN13" jsbarcode-value="978020137962" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold">
</svg>
<h4>{{y.code}}</h4>
</div>
</div>
\* i thinked in some like this, but doesn't work*\
<div class="row" ng-repeat="x in teste">
<div class="col center">
<svg class="barcode" jsbarcode-format="EAN13" jsbarcode-value="{{y.code}}" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold">
</svg>
<h4>{{x.code}}</h4>
</div>
</div>
<script>
$(document).ready(function() {
JsBarcode(".barcode").init();
});
</script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.teste = [
{
"item": "1",
"code": " 978020137962",
},
{
"item": "2",
"code": "978020137129 ",
},
{
"item": "3",
"code": " 978020137923",
},
});
</script>
</body>
</html>
To achieve expected result, use jsbarcode-value="{{x.code.trim()}}" instead of {{y.code}}
Issue:
y is undefined in second div, as the ng-repeat div closes before the start of second ng-repeat where is y not available and only x.code is available
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.teste = [
{
"item": "1",
"code": " 978020137962",
},
{
"item": "2",
"code": "978020137129 ",
},
{
"item": "3",
"code": " 978020137923",
},
]
});
<html ng-app="myApp">
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-controller="myCtrl">
<div class="row" ng-repeat="y in teste">
<div class="col center">
<svg class="barcode" jsbarcode-format="EAN13" jsbarcode-value="978020137962" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold">
</svg>
<h4>{{y.code}}</h4>
</div>
</div>
\* i thinked in some like this, but doesn't work*\
<div class="row" ng-repeat="x in teste">
<div class="col center">
<svg class="barcode" jsbarcode-format="EAN13" jsbarcode-value="{{x.code.trim()}}" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold">
</svg>
<h4>x-{{x.code}}</h4>
</div>
</div>
<script>
$(document).ready(function() {
JsBarcode(".barcode").init();
});
</script>
</body>
</html>
codepen - https://codepen.io/nagasai/pen/XwegrG
Related
I'm having some trouble figuring out a way to insert a <p> in the DOM in each item of ng-repeat.
I'm doing ng-repeat of this array of objects:
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
then in the html file I have:
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
{{insertHTML(item.paragraph)}}
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
the insert.HTML(str) function is supposed to transform the string on each item.paragraph into an html element.
Here's the function:
$scope.insertHTML = function(str) {
var wrapper = document.createElement('div');
wrapper.innerHTML = str;
};
I created this plunker where you can check the whole code running
Try Directives. See demo here
var app = angular.module('plunker', []);
app.directive('myDir',function(){
return{
link : function(scope,element){
element.append(' <br><br><p>this is the beginning of box</p>');
element.append('<p>'+scope.item.name+'</p>');
element.append(' <p>this is the end of box<br><br><br></p>');
}}
})
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<my-dir></my-dir>
</div>
</body>
</html>
You should use Angular's built in ng-bind-html and ngSanitize:
angular.module("demo", ["ngSanitize"]);
angular
.module("demo")
.controller("demoController", ["$scope", "$sce", function($scope, $sce) {
$scope.items = [{
name: "john",
paragraph: $sce.trustAsHtml('<iframe border="0" frameborder="0" allowtransparency="true" width="603" height="465" src="//www.chess.com/emboard?id=3681802"></iframe>')
},
{
name: "rita",
paragraph: "<p>hi, im rita</p>"
},
{
name: "joe",
paragraph: "<p>hi, im joe</p>"
}
];
}])
.red {
background-color: red
}
.blue {
background-color: blue
}
.green {
background-color: green
}
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="demoController">
<p>hello everyone</p>
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
<div ng-bind-html="item.paragraph"></div>
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-sanitize.js"></script>
</body>
</html>
I have a javascript array like this, and trying to generate nested <div> with AngularJS.
var arr = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"];
I would like to divide with every 3 elements like this.
<div class="parent">
<div class="child">abc</div>
<div class="child">def</div>
<div class="child">ghi</div>
</div>
<div class="parent">
<div class="child">jkl</div>
<div class="child">mno</div>
<div class="child">pqr</div>
</div>
<div class="parent">
<div class="child">stu</div>
</div>
Can I do this?
One way is create a dummy array based on itemsArray.length/maxItems and use that dummy array for an outer ng-repeat...then use limitTo filter for items.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.maxItems = 3;
$scope.items = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"];
$scope.parentArr = new Array(Math.ceil($scope.items.length/$scope.maxItems));
});
.parent{border: 1px solid #ccc; padding:10px}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<div class="parent" ng-repeat="par in parentArr track by $index">
<div ng-repeat="item in items |limitTo: maxItems : $index*maxItems">{{item}}</div>
</div>
</div>
Here is the complete code to achieve it in angularJs using ng-repeat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="parent" ng-repeat="item in chunkArray">
<div class="child" ng-repeat="child in item">{{child}}</div>
</div>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
var data = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"];
$scope.chunkArray = chunk(data,3);
function chunk(array, size) {
var result = []
for (var i=0;i<array.length;i+=size)
result.push( array.slice(i,i+size) )
return result;
}
});
</script>
</body>
</html>
I have a code like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well">
Are you developer <input type="checkbox" ng-model="isTrue" ng-change="count=count+1" />
Count: {{count}}
<pre>{{isTrue}}</pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.isTrue = true;
}]);
</script>
</body>
</html>
In this code when check the checkbox the count will be incremented. Here how to i check if checkbox is ticked, then only incremented, otherwise if untick, it will decremented. Please anyone help.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well">
Are you developer
<input type="checkbox" ng-model="isTrue" ng-change="isTrue ? (count=count+1) :(count=count-1) " />Count: {{count}}
<pre>{{isTrue}}</pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope',
function($scope) {
$scope.isTrue = false;
}
]);
</script>
</body>
</html>
try changing ng-change .
This will work for you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well" ng-repeat="Option in OptionList">
Are you {{Option.choice}} <input type="checkbox" ng-model="Option.value" ng-change="UpdateCount(Option)" />
Count: {{Option.count}}
<pre>{{Option.isTrue}}</pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.isTrue = false;
$scope.count = 0;
$scope.OptionList = [{
choice: "Developer",
value: false,
count: 0
},{
choice: "Tester",
value: false,
count: 0
},{
choice: "Lead",
value: false,
count: 0
},{
choice: "Architect",
value: false,
count: 0
}
];
$scope.UpdateCount = function(Option){
if(Option.value){
Option.count = Option.count + 1;
}
else {
Option.count = Option.count - 1;
}
}
}]);
</script>
</body>
</html>
I am trying to display a cesium globe with a timestamp and legend in AngularJS. However I only see the timestamp and everything else is blank however if I comment out and move what ng-app is not commented out it will show other divs but I cant get all three to show at the same tim:
<div class="timeStamp" ng-app="myApp">
<div ng-controller='TimeCtrl'>
<p>{{ clock | date:'MM-dd-yyyy HH:mm:ss'}}</p>
</div>
</div>
<div class="cesium" ng-app="ngCesium" ng-controller="appCtrl as appCtrl">
<div cesium-directive="" id="cesium" class="cesiumContainer"></div>
</div>
<div ng-app="" class="categoryBox" data-ng-init="planes=['Commercial Planes','Private Planes']">
Legend
<li data-ng-repeat="x in planes" ng-style="{ background: x == 'Commercial Planes' ? 'red' : 'blue' }">
{{x}}
</li>
</div>
You can use like this:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
Refer the following url it will help for you:
AngularJS Multiple ng-app within a page
I am trying out the basics of AngularJS first time. I am trying out ng-repeat first time. However it is not working.
Here is a non working jsfiddle.
I have written the code in single standalone HTML file as follows and also angular.js file resides in the same directory
<html ng-app>
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var users = [
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
</script>
</head>
<body>
<div>
<div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
users must refer to a property that is accessible on the current scope. Scopes are AngularJS way of tying data from and to HTML. This is explained further in the "Model and Controller" chapter of the second tutorial page. See a working version of your Fiddle here.
HTH!
you have not define the controller such as
myapp.controller("AppController",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek"
},
];
});
/// than you can call controller to the view such as below code :
<body ng-controller="AppController">
<div><div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
Live Example you can access by this link : http://jsfiddle.net/9yHjj/
Your code should have been like this....
<html ng-app="app">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var app = angular.module("app",[]).controller(AppController,["$scope",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
}])
</script>
</head>
<body ng-controller="AppController">
<div>
<div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
<html ng-app="myapp1">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("myapp1",[]);
myapp.controller("AppController",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
});
</script>
</head>
<body ng-controller="AppController">
<div>
<div data-ng-repeat="user in users">
<h2 ng-bind="user.name"></h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
This code should work