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>
Related
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
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 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 have this code:
<div class="list" ng-repeat="key in results">
{{key.locations}}
</div>
JSON
[
{
"locations": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
"imgs": ["111.png", "222.png"]
}
]
JS
.controller('ListCtrl', function($scope, $http) {
$http.get("js/data.json").success(function(results) {
$scope.results = results;
});
})
I want to loop trough the array 1,2,3...
Any help much appreciated!
Use another ng-repeat, which is nested in the first one:
<div class="list" ng-repeat="key in results">
<div ng-repeat="location in key.locations">
{{location}}
</div>
</div>
If results always has 1 value, just do this:
<div class="list" ng-repeat="location in results[0].locations">
{{location}}
</div>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var test = [];
$scope.results = [
{
"locations": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
"imgs": ["111.png", "222.png"]
}
]
for (var i=0;i<$scope.results[0].locations.length;i++)
{
test.push($scope.results[0].locations[i]);
}
$scope.result = test;
});
<!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.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="list" ng-repeat="location in result">
{{location}}
</div>
</body>
</html>
You can break and create a temp array and then iterate through that array. Please find the snippet. And let me know your findings
I'm figuring out how can I save the values that are entered in the input text box inside ng-repeat on a single click of a button.I have seen examples like this getting values from text box that lets user to save each text box individually.
Below is a sample code:
$scope.items=[1,2,3,4]
<div ng-repeat="item in items">
<input type="text" ng-model=item.id>
</div>
<button type="button" ng-click="saveAllValues()">Save</button>
You just bind the ng-model to another object and use $index to refer to the index within the very ng-repeat:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.items = [1, 2, 3, 4];
$scope.values = [];
$scope.saveAllValues = function() {
alert($scope.values);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="item in items">
<input type="text" ng-model="values[$index]">
</div>
<button type="button" ng-click="saveAllValues()">Save</button>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.items = [1, 2, 3, 4];
$scope.saveAllValues = function() {
alert($scope.items);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="$index in items">
<input type="text" ng-model='items[$index]'>
</div>
<button type="button" ng-click="saveAllValues(items)">Save</button>
</div>
Try this:
You need to have . notation in your model. Refer this
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.items = [{
value: 0
}, {
value: 1
}, {
value: 2
}]
$scope.saveAllValues = function(items) {
alert(JSON.stringify(items));
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div ng-repeat="item in items">
<input type="text" ng-model='item.value'>
</div>
<button type="button" ng-click="saveAllValues(items)">Save</button>
</body>
</html>
I was stuck in the same and found something good "ng-model-option" set is to update on blur and you are ready to save individual inputs value while doing "ng-repeat".
You'll need to add newer version of angularjs, try this "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.items = ['red', 'blue', 'green', 'yellow'];
$scope.saveAllValues = function() {
alert($scope.items );
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="item in items">
<input type="text" ng-model="items[$index]" ng-model-options="{updateOn:'blur'}">
</div>
<button type="button" ng-click="saveAllValues()">Save</button>
</div>