ng-repeat and ng-scrollbar doesn't work together - javascript

I'm just starting Angular JS and trying to have a scrollbar appearing as I add an element in the list which would be populated in the box of the contents.
I installed ng-scrollbar from here. https://github.com/asafdav/ng-scrollbar
HTML:
<link rel="stylesheet" href="../dist/ng-scrollbar.min.css" >
<style>
.scrollme {
max-height: 100px;
}
</style>
</head>
<body>
<div ng-app="DemoApp">
<div class="container" ng-controller="DemoController">
<table border="0" width="100%">
<div class="scrollme" ng-scrollbar rebuild-on="rebuild:me" is-bar-shown="barShown">
<tr>
<th width="2%"></th>
<th width="14%">Name</th>
<th width="85%">Address</th>
</tr>
<tr>
<td>
<img src="addImageButton.png" ng-click="addRow()" />
</td>
<td class="inlineBlock">
<input type="text" ng-model="row.name" />
</td>
<td>
<input ng-model="row.addr" />
</td>
</tr>
<tr ng-repeat="row in rowList">
<td>
<img src="removeImageButton.png"ng-click="removeRow($index)" />
</td>
<td>{{row.name}}</td>
<td>{{row.client}}</td>
</tr>
</div>
</table>
</div>
</div>
</body>
JavaScript:
(function () {
'use strict';
var app = angular.module('DemoApp', ['ngScrollbar']);
app.controller('DemoController', DemoController);
function DemoController($scope) {
// portfolio and broker tabs
$scope.row = {}
$scope.row.name = "";
$scope.row.addr = "";
$scope.rowList = [];
// adding a row to list
$scope.addRow = function() {
var data = {};
data.name = $scope.row.name;
data.addr = $scope.row.addr;
$scope.rowList.push(data);
$scope.row.name = "";
$scope.row.addr = "";
console.log($scope.rowList);
}
// removing a row from the list
$scope.removeRow = function(obj) {
console.log('end' + $scope.rowList);
if(obj != -1) {
$scope.rowList.splice(obj, 1);
}
}
$scope.$on('scrollbar.show', function(){
console.log('Scrollbar show');
});
$scope.$on('scrollbar.hide', function(){
console.log('Scrollbar hide');
});
// $scope.$on('loopLoded', function(evt, index) {
// if(index == $scope.me.length-1) {
// $scope.$broadcast('rebuild:me');
// }
// });
}
})();
It's part of my code so it might not fully make sense. But the way it works is that if I pressed the addImageButton, it would add a row which will add a row on the web. And conversely, removeImageButton will delete a row which will show on the web immediately. I need a scroll bar appearing once it reaches the height 100px. I checked the last answer of the ng-scrollbar is not working with ng-repeat
as well but it didn't work. Would be great if I could get some help with the detailed explanation. :) Thanks!

Figured out! I need to put the broadcast method in addRow and removeRow methods. Also, I had to put the out from the

Related

Jquery adding only one row not 4

Hi there can someone please help me with this code:
So this is the blade
<table class="optionsForm" style="width:100%">
<thead>
<tr >
<th><button type="button" class="add">Add</button></th>
#for($c = 1; $c<=4; $c++)
<th id="column{{ $c}}">
<input type="text" name="columns[{{ $c }}]"
class="form-control" placeholder="Column {{ $c }} ">
</th> #endfor
<th><button type="button" style="width: 100px; height: 25px" class="addColumn">Add Column</button></th>
</tr>
</thead>
<tbody> #for($r = 1; $r<=4; $r++)
<tr class="prototype">
</tr> #endfor
</tbody>
</table>
and this one is the js code, I need to be able to add only one row, here it is adding 4 rows, I need first to be shown 4 rows, but than when I click add I need to be added only one row how can I achieve this can someone please help me with this thing I am stuck, thank you so much for any efforts.
$(document).ready(function () {
var id = 0;
// Add button functionality
$("table.optionsForm button.add").click(function () {
id++;
var master = $(this).parents("table.optionsForm");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "")
prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.optionsForm button.remove").on("click", function () {
$(this).parents("tr").remove();
});
$("table.optionsForm button.addColumn").click(function () {
var $this = $(this), $table = $this.closest('table')
$('<th><input type="text" name="options" class="form-control" placeholder="Column"></th>').insertBefore($table.find('tr').first().find('th:last'))
var idx = $(this).closest('td').index() + 1;
$('<td><input type="radio" name="col' + idx + '[]" value="" /</td>').insertBefore($table.find('tr:gt(0)').find('td:last'))
});
});
The add button code is creating a collection of four elements with class "prototype" and then cloning four elements:
var prot = master.find(".prototype").clone()
To add a single element, try selecting the first DOM element from the collection and converting it to a JQuery object before applying clone:
var prot = $(master.find(".prototype")[0]).clone()
As a minimal test/demonstration case (not using blade)
var master = $("#master");
var prot = $(master.find(".prototype")[0]).clone();
master.append(prot);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="master">
<span class="prototype">proto 1</span><br>
<span class="prototype">proto 2</span><br>
<span class="prototype">proto 3</span><br>
<span class="prototype">proto 4</span><br>
</div>

change name of tab title place holder with current tab

I've tried a few things , but not versed enough in coding to get it done myself obviously
I setup a jsfiddle here - https://jsfiddle.net/7ojfmxn2/17/
I have a show tabs function to display tab content below , i have a header text for the tabs and i'd like to change that text to the name of the current tab each time one is clicked "League Tabs" i'd like renamed to Tab 0 , Tab 1 , Tab 2 ect , whenever one is selected, any help ?
function show_tab(tab_id) {
var done = false;
var counter = 0;
while (!done) {
var this_tab_content = document.getElementById("tabcontent" + counter);
var this_tab = document.getElementById("tab" + counter);
if (!this_tab_content) {
done = true;
} else {
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
} else {
this_tab_content.style.display = 'none';
this_tab.className = "";
}
}
counter++;
}
location.hash = tab_id;
}
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
I'm not sure it is what you're asking for, but if you want substitute "League Tabs" with the Tab name, you could do as follows
1- give an ID to the span where the tab header is stored , for example id=tabheader
2- in the part of code where you set the visible tab, also set the content of that span (the element with id=tabheader)
Here's the code
HTML
...
<div class="myfantasyleague_tabmenu"><span id="tabheader">LEAGUE TABS</span>
....
JS
....
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
var tabheader = document.getElementById("tabheader");
tabheader.innerHTML="tab " + counter;
}
...
See updated fiddle
https://jsfiddle.net/7ojfmxn2/30/
EDIT
If you want the title LEAGUE TABS be displaied at the beginning, you've to comment your init code in a way no tab is selected.
/*
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
*/
EDIT 2
To avoid showing all tabs you can use
show_tab(-1);
instead of
show_tab(0);
see fiddle https://jsfiddle.net/7ojfmxn2/50/
EDIT 3
In the case you want to see the 'main' tab name on page load, having anyway the tab 0 loaded, you may
1- change the show_tab, adding an input param. This boolean param determines what to show (main tab name or displaied tab name ), as follows
function show_tab(tab_id, show_main_tab_name) {
.....
//here is where the tab title is displaied
var tabheader = document.getElementById("tabheader");
if(show_main_tab_name){
tabheader.innerHTML="LEAGUE TABS";
}
else {
tabheader.innerHTML="tab " + counter;
}
....
2- call on init the show tab with the param set to true
(I put your original function)
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0,true);
}
See my new fiddle https://jsfiddle.net/7ojfmxn2/55/
You need to set an id on the title of the element that contains the tabs, so you can later select it and change it's content.
Then you can pass a 2nd parameter to your show_tab function which would be the tab title you want to display.
Here's the updated code (I had to delete the CSS to be able to post it here due to post size limits)
Here's the working Fiddle with all the CSS https://jsfiddle.net/7ojfmxn2/39/
function show_tab(tab_id, tab_title) {
var done = false;
var counter = 0;
while (!done) {
var this_tab_content = document.getElementById("tabcontent" + counter);
var this_tab = document.getElementById("tab" + counter);
if (!this_tab_content) {
done = true;
} else {
if (counter == tab_id) {
this_tab_content.style.display = '';
this_tab.className = "currenttab";
} else {
this_tab_content.style.display = 'none';
this_tab.className = "";
}
}
counter++;
}
location.hash = tab_id;
document.getElementById('tab_title').innerHTML = tab_title || 'LEAGUE TABS';
}
if (location.hash) {
show_tab(location.hash.substr(1));
} else {
show_tab(0);
}
<div id="contentframe">
<div id="withmenus">
<div class="myfantasyleague_tabmenu"><span id="tab_title">LEAGUE TABS</span>
<input id="sub100" type="checkbox">
<label for="sub100"><span></span></label>
<ul id="homepagetabs">
<li id="tab0" onclick="javascript:show_tab('0', 'Tab 0');"><a class="no-sub">Tab 0<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab1" onclick="javascript:show_tab('1', 'Tab 1');"><a class="no-sub">Tab 1<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab2" onclick="javascript:show_tab('2', 'Tab 2');"><a class="no-sub">Tab 2<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
<li id="tab3" onclick="javascript:show_tab('3', 'Tab 3');"><a class="no-sub">Tab 3<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
</ul>
</div>
<div id="tabcontent0" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 0 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent1" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 1 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent2" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 2 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
<div id="tabcontent3" class="homepagetabcontent">
<div class="mobile-wrap">
<table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
<caption><span>Tab 3 CONTENT</span></caption>
<tbody>
<tr>
<td id="division00" colspan="3">
<h3>Division 1</h3></td>
</tr>
<tr>
<th class="fname" title="Franchise Name">Franchise</th>
<th class="h2hwlt" title="Overall Wins, Losses and Ties">W‑L‑T</th>
<th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
</tbody>
</table>
</div>
</div>
</div>
</div>
Add an id to your HTML's <title> tag, like so:
<title id="myTitle"></title>
Using jQuery you could just do this:
$('#myTitle').html(this_tab.className);
With JavaScript it would be
document.getElementById("myTitle").innerText = this_tab.className;

display style for table row to stay aligned with header

I have a table and using javascript I give the user the option to remove table rows from the table by putting the display style to none.
If the user wants to see the rows again, I need to put the display style away from none and my problem is that I don't know what style to use. I thought table-row-group is the most sensible, but it messes up the rows...
I created a fiddle here and copied the code below
https://jsfiddle.net/b2s3dpo5/#&togetherjs=7EwfsBJIfw
<fieldset style="display: inline-block;">
<div style="display: inline-block;">
<input type="checkbox" name="{{ category.name }}" id="category" checked> remove rows
</div>
</fieldset>
<div class="panel panel-default col-xs-12">
<table class="table table-striped">
<thead>
<tr>
<th><strong>ID</strong></th>
<th><strong>test test test</strong></th>
<th><strong>Institute/Organisation</strong></th>
<th><strong>test deadline test</strong></th>
</tr>
</thead>
<tbody>
<tr class="category">
<th class="col-xs-1" scope="row">
test
</th>
<td class="col-xs-5">
test
</td>
<td class="col-xs-4">
test
</td>
<td class="col-xs-2">
test
</td>
</tr>
</tbody>
</table>
</div>
and the necessary javascript
document.getElementById('category').onclick = function() {
toggleSub_by_class(this, 'category');
};
function toggleSub_by_class(box, select_class) {
// get reference to related content to display/hide
var el = document.getElementsByClassName(select_class);
var flag;
if (box.checked) {
for (var i = 0, j = el.length; i < j; i++) {
el[i].style.display = 'table-row-group';
}
} else {
for (var i = 0, j = el.length; i < j; i++) {
var classList = el[i].className.split(' ')
flag = 0
for (var h = 0, k = classList.length; h < k; h++) {
if (document.getElementById(classList[h])) {
if (document.getElementById(classList[h]).checked) {
flag = 1
}
}
}
if (flag == 0) {
el[i].style.display = 'none';
}
}
}
}
Try visibility:hidden or height:0px or both.
I figured it out myself... the correct display style is empty
el[i].style.display = '';
that works fine for me
carl
First off, for readability purposes, try to create more concise headers when you share it with the rest of the community (although I understand that this is not a big deal).
I would try
visibility:hidden

Calculating items that were entered into an array

I'm trying to find a way to calculate the data that was entered into an array.
The JavaScript
function getInput()
{
var even = [];
var odd = [];
var num = prompt("Enter your number");
if (num % 2 === 0) {
alert("Data entered into array.");
even.push(num);
}
else if (num % 2 == 1) {
alert("Data entered into array.");
odd.push(num)
}
else {
alert("Invalid input.");
}
}
function finished() //This is where the calculations are done. It's accessed by a button in my HTML.
{
var sum = document.getElementById("leftSumOutput").innerHTML = even[];
}
This is the structure for the page. I'm trying to use tables to store the outputs.
The HTML
<!DOCTYPE html>
<html>
<head>
<title>Sample Title</title>
<script type="text/javascript" src="assignmentOne.js"></script>
<link rel="stylesheet" type="text/css" href="assignmentOne.css">
<link rel="icon" href="favicon.png" type="image/x-icon" />
</head>
<body>
<div align=center>
<h1>Welcome to Assignment One!</h1>
<label for="input">Click for each time you would like to make an input ==></label>
<button id="input" onclick="getInput()"><b>Click to input data</b></button><br><br>
<button id="done" onclick="finished()">Click here when done</button>
<!--<h1 id="even">Even</h1>
<h1 id="odd">Odd</h1>
<p id="left"></p>
<p id="right"></p>
<p id="leftResult"></p>
<p id="rightResult"></p>-->
<table>
<tr>
<th></th>
<th>Even</th>
<th>Odd</th>
</tr>
<tr>
<td></td>
<td id="even"></td>
<td id="odd"></td>
</tr>
<tr colspan="2">
<td>Sum</td>
<td id="leftSumOutput"></td>
<td id="rightSumOutput"></td>
</tr>
<tr colspan="2">
<td>Average</td>
<td id="leftAvgOutput"></td>
<td id="rightAvgOutput"></td>
</tr>
</table>
</div>
</body>
</html>
I want to calculate the items within the array. I'm a novice, so I apologize in advance.
EDIT: I forgot to mention that I don't know how to calculate the averages of the fields either. Any help with that would be appreciated. Thanks everyone for your assistance so far!
I think you are little bit confused with scoping of variables.
Here is an example of how it could've been done:
(function(w, d) {
var odds = [], evens = [], button, elSumOdds,elSumEvens, elAvgOdds, elAvgEvens, s
w.addEventListener('load', function() {
button = d.querySelector('button')
elSumOdds = d.querySelector('#sum-odds')
elSumEvens = d.querySelector('#sum-evens')
elAvgOdds = d.querySelector('#avg-odds')
elAvgEvens = d.querySelector('#avg-evens')
button.addEventListener('click', calculate)
})
function calculate() {
var i = prompt('enter number') | 0;
if ((i|0)%2) {
odds.push(i)
s = odds.reduce(function(a,n) { return a+n }, 0)
elSumOdds.innerText = s
elAvgOdds.innerText = s / odds.length
} else {
evens.push(i)
s = evens.reduce(function(a,n) { return a+n }, 0)
elSumEvens.innerText = s
elAvgEvens.innerText = s / evens.length
}
}
})(window, document)
<button > calculate</button>
<table>
<tr><td></td><td>Sum</td><td>Avg</td></tr>
<tr><td>Odds</td><td id='sum-odds'></td><td id='avg-odds'></td></tr>
<tr><td>Evens</td><td id='sum-evens'></td><td id='avg-evens'></td></tr>
</table>
If you need to calculate sum of each element in array you need to write map function. Visit link: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map
if you just need to know amount of elements, call: alert(even.length);
Note: #vittore 's structure inspired this change.
(function(d) {
d.getElementById('input').addEventListener('click', getInput);
d.getElementById('done').addEventListener('click', finished);
var elSumOdd = d.getElementById('oddSumOutput');
var elSumEven = d.getElementById('evenSumOutput');
var elAvgOdd = d.getElementById('oddAvgOutput');
var elAvgEven = d.getElementById('evenAvgOutput');
var even = [];
var odd = [];
function getInput() {
var num = prompt("Enter your number") | 0;
if (num % 2 == 0) {
even.push(num);
} else if (num % 2 == 1) {
odd.push(num);
} else {
alert("Invalid input.");
}
finished();
}
function finished() { //This is where the calculations are done. It's accessed by a button in my HTML.
elSumOdd.innerHTML = odd.reduce(function(a, b) {
return a + b;
}, 0);
elSumEven.innerHTML = even.reduce(function(a, b) {
return a + b;
}, 0);
elAvgOdd.innerHTML = elSumOdd.innerHTML / odd.length || 0;
elAvgEven.innerHTML = elSumEven.innerHTML / even.length || 0;
}
})(document);
<div align=center>
<h1>Welcome to Assignment One!</h1>
<label for="input">Click for each time you would like to make an input ==></label>
<button id="input"><b>Click to input data</b>
</button>
<br>
<br>
<button id="done">Click here when done</button>
<!--<h1 id="even">Even</h1>
<h1 id="odd">Odd</h1>
<p id="left"></p>
<p id="right"></p>
<p id="leftResult"></p>
<p id="rightResult"></p>-->
<table>
<tr>
<th></th>
<th>Even</th>
<th>Odd</th>
</tr>
<tr>
<td></td>
<td id="even"></td>
<td id="odd"></td>
</tr>
<tr colspan="2">
<td>Sum</td>
<td id="evenSumOutput"></td>
<td id="oddSumOutput"></td>
</tr>
<tr colspan="2">
<td>Average</td>
<td id="evenAvgOutput"></td>
<td id="oddAvgOutput"></td>
</tr>
</table>
</div>

Using Javascript How to loop through a div containing checkboxes and get the value checked from each check box

I have a table with each row containing a cell that has 8 check boxes(Column4)
Here is an example
<table id="enc-assets" class="table">
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4(CONTAINS OPTIONS)</th>
</thead>
<tbody>
<tr>
<td id="sc-isrc"></td>
<td id="sc-filename"></td>
<td id="sc-path" hidden></td>
<td id="sc-platforms">
<div id="sc-inline" style="display: inline-block;">
<div >
<div ng-repeat="p in products ">
<label id="enc"><input id="Platform" ng-checked="prod[p.name]" ng-model="prod[p.name]" ng-init="prod[p.name] = true" type="checkbox"/></label>
</div>
</div>
</div>
</td>
<td>
</td>
<td><br/><br/><button id="enqueuebtn" type="button" ng-click="Show(test)" class="btn-primary"></button></td>
</tr>
</tbody>
</table>
I am trying to loop through each row and assign values from each cell into an object .
I am having problems getting the value checked from the cell that contains the 8 check boxes. I can get values from the other cells just fine.
I have tried the following:
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms div div").each(function() {
var platform, selected;
selected = $(this).find('#Platform div label input').checked;
if (selected === true) {
platform = $(this).find('#enc').text();
This is the part that I am not sure if works:
selected = $(this).find('#Platform div label input').checked;
Do I have the correct nesting here to get the values from the check boxes?
Try this:
jsFiddle here
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms>div>div").each(function() {
alert( $(this).attr('id') );
var platform, selected;
selected = $(this).find('#Platform');
if(selected.is(':checked')) {
alert('Checked');
}
platform = $(this).find('#enc').text();
alert(platform);
}); //END each #sc-platforms>div>div
}); //END each #enc-assets tbody tr

Categories