Here is my code for show and hide div using loop,i have 9 div like
<div ng-show="div1">.......</div>
<div ng-show="div2">.......</div>
<div ng-show="div3">.......</div>
<div ng-show="div4">.......</div>
<div ng-show="div5">.......</div>
<div ng-show="div6">.......</div>
<div ng-show="div7">.......</div>
<div ng-show="div8">.......</div>
<div ng-show="div9">.......</div>
am trying to show and hide the div using loop based on the value.suppose here am giving value as 4.i mean 4 div ll be show,
var testOk='';
var testFAIL='';
$scope.tests=function(){
for(var i=1; i<=9; i++){
if(i <= 4)
{
testOk+='$scope.div'+i+'=true;';
}
else{
testFAIL +='$scope.div'+i+'=false;';
}
}
alert(testOk);
}
here testOK var contain showing div and testFail var contain hiding div,
output:-
testOK =$scope.Div1=true;$scope.Div2=true;$scope.Div3=true;$scope.Div4=true;
testFAIL =$scope.Div5=false;$scope.Div6=false;$scope.Div7=false;$scope.Div8=false;$scope.Div9=false;
how can i bind that value in div section.i hope u understand what am trying to asking.Thanks in advance.
You have a weird approach for this. I'd show/hide divs like this:
angular.module('app', []).controller('ctrl', function($scope) {
$scope.nums = []
for (var i=0; i <= 9; i++) {
$scope.nums.push(i);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input ng-model="hideFrom" placeholder="Hide from this number onwards">
<div ng-repeat="num in nums" ng-hide="hideFrom && $index >= hideFrom">
{{num}}
</div>
</div>
Related
How to store the items checked in a checkbox in an array?
I tried using a for loop but it didn't work
for(i=0;i<selectedQuote.length;i++) {
}
I believe this will serve your purpose.
function ShowValue(){
var arrayTemp=[];
$('input[type=\"checkbox\"]:checked').each(function(){
arrayTemp.push($(this).val());
});
/*
If you want to itterate the array
for(var i=0;i<arrayTemp.length;i++){
console.log(arrayTemp[i]);
}
*/
$("#result").html(arrayTemp);
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" value="val1">Val 1
<input type="checkbox" value="val2">Val 2
<input type="checkbox" value="val3">Val 3
<button onclick="return ShowValue()"> Show </button>
<div id="result">
</div>
</body>
</html>
To achieve expected result, use below option using querySelectorAll to get all checkboxes using attribute name
var elem = document.querySelectorAll('[name=sports]');//all checkbox elements
var checkbox =[];
for(var i =0; i < elem.length; i++){
if(elem[i].checked){
checkbox.push(elem[i].value)
}
}
console.log(checkbox)
https://codepen.io/nagasai/pen/OQoBeL
For capturing the checked elements dynamically use addEventListener
var elem = document.querySelectorAll('[name=sports]');//all checkbox elements
var checkbox =[];
for(var i =0; i < elem.length; i++){
elem[i].addEventListener('change', function(e){
console.log(e.target.checked)
if(e.target.checked){
checkbox.push(e.target.value)
console.log(checkbox)
}else{
checkbox.splice(checkbox.indexOf(e.target.value),1)
console.log(checkbox)
}
});
}
https://codepen.io/nagasai/pen/rJZQOp
I have 3 different charts inside 3 different div tags that appear and hide when specified. However, two of the charts randomly resize and i know why.
How do i fix this?
I have wordpress and using visualizer plugin for my charts. have the code in the header.php file and in the text portion of the page specific code.
Code below:
Header.php snippet -
<script>
var divs = ["Daily", "Weekly", "Monthly"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
HTML page snippet -
<div class="inner_div">
<div id="Daily">[visualizer id="431"]</div>
<div id="Weekly" style="display: none;">[visualizer id="430"]</div>
<div id="Monthly" style="display: none;">[visualizer id="429"]</div>
</div>
<div class="main_div">
<div class="buttons">
Daily | Weekly | Monthly
</div>
A quick fix is to include call visualizer.render(); at the end of your toggleVisibility function:
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
visualizer.render();
}
The problem is caused by invalid calculation of available area for divs that aren't visible at the time. Calling this method forces a re-calulcation of the svgs and ensures the right size.
I know it is very simple but I wanna ask how to create div in ng-Repeat including an object proprty defines count of object.
For example i have an object like
function rowModel() {
this.id = 0;
this.columnCount = 1;
}
And I filled an array like below
$scope.Rows = [];
$scope.AddRow = function() {
var newRow = new rowModel();
newRow.id = 1;
newRow.columnCount = 3;
$scope.Rows.push(newRow);
}
I just wanna create an html template including 3 divs in each row.
This is my html and I wanna duplicate .cell div 3 times which is defined in object model
<button class="button" ng-click="AddRow()">Satır Ekle</button>
<div class="row cells{{row.columnCount}} bg-cyan" ng-repeat="row in Rows">
<div class="cell" ng-repeat="column in row.columnCount">{{row.id}}</div>
</div>
Anyone help?
Thanks
Use the following code in your controller
$scope.getNumber = function(num) {
return new Array(num);
}
And use the following in your view
<button class="button" ng-click="AddRow()">Satır Ekle</button>
<div class="row cells{{row.columnCount}} bg-cyan" ng-repeat="row in Rows">
<div class="cell" ng-repeat="column in getNumber(row.columnCount) track by $index">{{row.id}}</div>
</div>
Also if you do not want touch controller you can do this
ng-repeat="_ in ((_ = []) && (_.length=row.columnCount) && _) track by $index"
Here is the post where I found it.
i would create a filter for this
angular.module('myApp')
.filter('range', function(){
return function(n) {
var res = [];
for (var i = 0; i < n; i++) {
res.push(i);
}
return res;
};
});
After that, on the view is possible to use like this:
<div class="cell" ng-repeat="column in row.columnCount | range">{{row.id}}</div>
I'm trying to write a small Jquery program with an autocomplete searchform. I would like the user to be able to add items from the autocomplete form to a sort of shopping list. I have difficulties finding a way to calculate and update the total price of all added products, I tried to store the prices, which are in suggestion.data and tot add it recusively to a total as in
total = total + suggestion.data, but this seems not to be the way. Could someone help me to produce and display this total? My jQuery code is as follows:
var Price = {};
var Name = {};
var Totaal = {};
$(function () {
var currencies = [
{value:'TEXT-STRING',data:'5.50)'},
{value:'TEXT-STRING2',data:'3.10)'},
];
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
Price.fff = suggestion.data;
Name.fff = suggestion.value;
},
});
});
function addListItem() {
var write2 = Price.fff;
var write = $('#autocomplete').val();
var list = $('#itemList');
var item = $('<li><span class="list">' + write + '</span><button
class="delete">X</button></li>');
var autocomplete = $("#autocomplete");
if (write.length === 0 || write.length > 88) {
return false;
}
if (write == Name.fff) {
list.append(item);
list2.append(item2);
$(autocomplete).val('');
}
$(autocomplete).val('');
}
function deleteItem() {
$(this).parent().remove();
}
$(function () {
var add = $('#addItem');
var autocomplete = $('#autocomplete');
var list = $('#itemList');
add.on('click', addListItem);
list.on('click', '.delete', deleteItem);
autocomplete.on('keypress', function (e) {
if (e.which == 13) {
addListItem();
}
}
And my HTML looks like:
<body>
<div id="box-1"> </div>
<div id="box-2"> </div>
<div id="page">
<h1>Shop</h1>
</div>
<div id="main">
<div id="top">
<div id="form">
<div id="searchfield">
<input type="text" id="autocomplete" name="currency" class="biginput" placeholder="ADD ITEMS BELOW">
<input type="submit" id="addItem" value="+">
</div>
<div class="line"> </div>
</div>
<div id="bottom">
<div class="items">
<ul id="itemList">
</ul>
</div>
</div>
Keep added item in array with prices, so you can recalculate total at any time. Don't forget to remove it from array when removing from the list.
Don't keep data in DOM, use DOM only to display info that is in your model.
I am trying to figure out how to dynamically create bootstrap row divs with a class of row-fluid with angular.js using the ng-repeat directive.
Here is the angular:
<div ng-repeat="task in tasks" class="row-fluid">
<div class="span6 well">{{task.name}}</div>
</div>
This does not work though. The bootstrap html I wish to generate is:
http://jsfiddle.net/YKkXA/2/
Basically I need to do mod 2 of the index inside of the ng-repeat, and if its 0, close out the </div> and create a new <div class="row-fluid">. How is this possible?
The idea is to filter your items in order to group them, and make a second ngRepeat to iterate on sub-items.
First, add that filter to your module :
module.filter('groupBy', function() {
return function(items, groupedBy) {
if (items) {
var finalItems = [],
thisGroup;
for (var i = 0; i < items.length; i++) {
if (!thisGroup) {
thisGroup = [];
}
thisGroup.push(items[i]);
if (((i+1) % groupedBy) === 0) {
finalItems.push(thisGroup);
thisGroup = null;
}
}
if (thisGroup) {
finalItems.push(thisGroup);
}
return finalItems;
}
};
});
In your controler (because if you filter directly in your template, then you will have a $digest loop):
function TaskCtrl() {
$scope.tasksGroupBy2 = $filter('groupBy')(taskGroup, 2);
}
And in your .html :
<div ng-repeat="taskGroup in tasksGroupBy2" class="row-fluid">
<div ng-repeat="task in taskGroup" class="span6 well">{{task.name}}</div>
</div>
As an improvement to the answer Anthony gave, I would say that you could save yourself a lot of trouble using the slice method instead of going through all those conditions.
Try defining your filter as it follows:
module.filter('group', function() {
return function(items, groupItems) {
if (items) {
var newArray = [];
for (var i = 0; i < items.length; i+=groupItems) {
if (i + groupItems > items.length) {
newArray.push(items.slice(i));
} else {
newArray.push(items.slice(i, i + groupItems));
}
}
return newArray;
}
};
});
After that you can call the filter on your controller as Anthony pointed out in his response:
function Controller ($scope) {
$scope.itemsGrouped = $filter('group')(itemsArray, 5);
}
Off Topic: using bootstrap you can just place divs of class="span6 well" into one bigass row as they will stack nicely. (You will get an responsive layout too). Sorry if it was just an example of the behaviour that bootstrap can't handle. Anthony and Remigio are right; you have to create an extra module vehicle that will generate divs immersed into your ng-repeated tags.