We Keep Coding

Why does this.classList.toggle("classname") affect parents of this as well?

I'm creating a website and I'm having some trouble with javascript. I have this function:
function offerboxclick(obj) {
obj.classList.toggle("menuelementclicked");
}
and my html looks like this:
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
<level>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
</level>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
</div>
The css code I think isn't relevant, because the problem is probably with the js function. As you can see, I have a multi level menu, and it works just fine when I'm clicking on the level 0 element to show hidden level 1 elements. But when I click any of the level 1 elements, the js function does work properly on the object, because it toggles "menuelementclicked" class on it. The problem is that it also toggles this class in parent menu element, so at the same time it opens level 2 and closes whole menu. I don't really know what to do now. Any help would be appreciated!
P.S. I tried putting my code on jsfiddle to show you all of it but for some reason on it doesn't work there at all 0_o

repeat div section in the length of list (Ionic)

I have a custom JavaScript file with some function in it. All the functions work perfectly fine.
One of the functions returns a list modules. I would like to repeat in my template the div section as many times is the length of my list.
This is my ionic template file:
<ion-view title="My Marks" id="page7">
<ion-content ng-controller="MyMarks" padding="true" class="has-header">
<div ng-repeat="module in getCourseModules">
<div class="row">
<div class="col">{{module}}</div>
</div>
<div class="row">
<div class="col col-50">Module Mark</div>
<div class="col col-50">{{GenerateRandomMarks[i]}}</div>
</div>
<br>
<br>
</div>
</ion-content>
And this is my controller inside my app.js:
app.controller('MyMarks', function ($scope){
$scope.courseNum = GenerateRandomNumber(0, 9);
$scope.getCourseName = getCourseName(courseNum);//Returns just Text
$scope.getCourseModules = getCourseModules(courseNum); //Returns the list
$scope.GenerateRandomMarks = GenerateRandomMarks(); //Returns a list of numbers
});
How can I repeat the segment of code I need? and in that segment of code, each time is repeated it should display different element of the list {{getCourseModules[i]}}.
I solved the most of it. But I cant figure out the repeat part. If I manually copy/and paste the code it works fine.

You need to use ngRepeat directive.
<div ng-repeat="model in getCourseModules">{{model}}</div>
<div ng-repeat="model in getCourseModules">{{someAnotherArray[$index]}}</div>

Angularjs Ionic - Different layouts for mobile and tablets

I am building a mobile application using Ionic and angularjs and Highcharts. In most of the pages there are sliders to display data. Every slide has two vertical divs containing highchart.
Now the requirement of the app is that when it is open in mobile device(Iphone 4 & 5) it should display one div per slide and when open on tablet(Ipad) it should display two vertical divs per slide containing highchart.
I have 10 charts to show. in Iphone/mobile there will be 10 slides(1 chart per slide). and in Tablet/Ipad will have 5 slides(2 chart per slide).
All the Highchart data is dynamic.
I am posting html code. As for angularJs I am not sure What approach I should take? I have posted image links of screenshots of the desired layouts for both the devices.
screenshot for Ipad/tablets
screenshot for Iphone/Mobile device
Html
<ion-view>
<div ng-controller="chartHomePage">
<ion-content>
<ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)" >
<ion-slide>
<div class="card chart-box">
<div class="item item-divider">
Chart 1
</div>
<div class="item item-text-wrap">
<div ng-controller="ChartController1">
<highchart id="" config="chart1"></highchart>
</div>
</div>
</div>
<div class="card chart-box">
<div class="item item-divider">
Chart 2
</div>
<div class="item item-text-wrap">
<div ng-controller="ChartController2">
<highchart id="" config="chart2"></highchart>
</div>
</div>
</div>
<iom-slide>
</ion-slide-box>
</ion-content>
</div><!--end controller div-->
</ion-view>
Thanks

I'd think something along the lines of modifying the platform css would do the trick. Try calculating the needed vh and update the .platform-ipad .chart-box class in the css

Scrollspy for Materialize not scrolling at all with Angularjs

I am trying to use scrollspy from Materialize (http://materializecss.com/scrollspy.html) to target each div that is created with ng-repeat.
However, it seems to me as if the scrollspy class is not doing anything. Instead of scrolling to that part of the page, the DOM just reloads and points to the portion of the page.
Another problem is that using href="/#community#sharingLove" is changing the website URL. Is there anyway for the scrollspy to work without adding to the URL?
<div class="full-height row" ng-controller="CommunityController">
<div class="col l10 main-content">
<div ng-repeat="principle in acmPrinciples" id ="{{principle.id}}" class="row full-width centering-text section scrollspy">
<div class ="col-md-12">
<h4>{{principle.title}}<h4>
</div>
<div class ="col-md-12 comm-description-container">
<p class="paragraph-style larger-font-size">
{{principle.description}}
</p>
</div>
<div class ="col-md-12">
<video class="responsive-video comm-video-height" controls>
<source ng-src="{{principle.videoURL}}" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="col l2 scroll-content">
<div class="row">
<div class="col hide-on-small-only m3 l2 scroll-items">
<ul class="section table-of-contents">
<li>Experiencing God</li>
<li>Sharing Love</li>
<li>Connecting Lives</li>
<li>Declaring Truth</li>
</ul>
</div>
</div>
</div>
</div>
I have linked included jQuery, bootstrap, and materialize. Last thing: other features of materialize work for me, just not the scrollspy. I also do
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});

I think if you remove #/community from the hrefs it should work. The href should contain the id of the block, not extra url info. Eg try using
Experiencing God

Angular JS repeater + Bootstrap Carousel

I'm trying to fill a Bootstrap Carousel component with data from AngularJS.
Basically I'm filling the items inside carousel-inner class like this:
<div class="carousel-inner">
<div class="item" ng-repeat="screen in app.screens">
<img ng-src="screens/{{screen}}" class="center"/>
</div>
</div>
Which would work fine, but at first I cannot see any picture, I think it's because none of my items has the active class.
In the official documentation:
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
The first div has "active" class, and it is visible, and when I try to write my example without Angular JS like above, it works.
How can I set the first item from ng-repeat to have the "active" class?

Use the following:
<div class="item" ng-repeat="screen in app.screens" ng-class="{active : $first}">
Here you can see which properties are exposed on the local scope.