Hi Guys,
So I may have bitten off more than I can chew on a template project I had. I have been trying to have a single page multi-tab setup so that you only need to load one page and have a cleaner look. However, I’m having a little bit of an issue with the sliders. I can get everything else to work except for this.
So my issue is that when I go to the tab I want the slider isn’t there until I click the little refresh button at the top. This is when I use method. However, it seems fine using the method except for not getting updates on the level. Does anyone have any thoughts on what I could do or any workarounds? Thank you in advance. The code snippet is below:
Edit**: I have attached a photo for reference.
<div ng-if="tabselector == 'officeaudio'">
<div class="main-tab">
<p>This is where</p>
<p>Office Audio</p>
<p>will go!</p>
<div class="button-container">
<span class="vertical-center">Office Power</span>
<label class="myswitch">
<input type="checkbox" ng-checked="(itemValue('Office_SZPower')=='ON')" ng-click="sendCmd('Office_SZPower', (itemValue('Office_SZPower')=='OFF') ? 'ON':'OFF')"></input>
<div class="myslider round"></div>
</label>
</div>
<div class="button-container">
<span class="vertical-center">Office Mute</span>
<label class="myswitch">
<input type="checkbox" ng-checked="(itemValue('Office_SZMute')=='ON')" ng-click="sendCmd('Office_SZMute', (itemValue('Office_SZMute')=='OFF') ? 'ON':'OFF')"></input>
<div class="myslider round"></div>
</label>
</div>
<div class="button-container">
<span class="vertical-center">Office Volume</span>
<div ng-init="officevolume={
name: 'Office Volume',
item: Office_SZVolume,
floor: 0,
ceil: 100,
step: 5,
hidelabel: true,
'}">
<widget-slider ng-model="officevolume">
</div>
</div>
<div class="button-container">
<span class="vertical-center">Office Source</span>
</div>
</div>
</div>