I have two ng-clicks in my menu:
One toggles the off-canvas navigation, the other one closes it.
The toggler works fine, but after I click the other one it doesn't work anymore.
Toggler:
<div class="row menu-bar sticky">
<div ng-include="'shared/nav.html'" class="nav-bar"></div> // This includes the offcanvas
<div ng-click="offcanvas = !offcanvas" class=" button hamb-button">
Menu
</div>
</div>
Closer:
<div class="offcanvas-container" ng-class="{'offcanvas-container-in': offcanvas}">
<div class="close-offcanvas" ng-click="offcanvas = false">x</div>
<div class="menu">
<ul ng-controller="PagesCtrl">
'...'
</ul>
</div>
</div>
What could cause this issue?
Related
Usign AngularJS and bootsrap 3.I have 3 nav-tabs and with panels on them. How do i programatically prevent the tabs from changing to the next one if the user has not selected a customer or dvd's. On bot the customerSelect and dvdSelect tab's i have panel with a list where the user selects the customer anmd also a list of dvds.
<div class="row">
<div class="panel panel-default">
<ul class="nav nav-tabs">
<li class="active in"><a data-target="#customerSelect" data-toggle="tab">Customer</a></li>
<li><a data-target="#dvdSelect" data-toggle="tab">Dvd List</a></li>
<li><a data-target="#orderDetail" data-toggle="tab">Order Details</a></li>
</ul>
</div>
</div>
<div class="row">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="customerSelect">
</div>
</div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade" id="dvdSelect">
</div>
</div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade" id="orderDetail">
</div>
</div>
</div>
I have omitted much of the code within my tab content div's.
Using JQuery there are 4 different events for bootstrap tabs:
show.bs.tab // Occurs when the tab is about to be shown.
shown.bs.tab // Occurs when the tab is fully shown (after CSS transitions have completed)
hide.bs.tab // Occurs when the tab is about to be hidden
hidden.bs.tab // Occurs when the tab is fully hidden (after CSS transitions have completed)
A pseudo-example you could use:
$('.nav-tabs a').on('show.bs.tab', function(){
console.log('validation starts...');
if (correct!==true){
$('#tab1').tab('show');
}else{
$('#tab2').tab('show');
}
});
I have this code to open a modal inside a ng-repeat. The modal is working fine as long as I hardcode the Id. However I would like to open another modal if it's for record 2, 3, etc.
<div class="w3-container w3-center w3-yellow">
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('{{ x.Id }}').style.display='block'"
class="w3-button">Meer foto's</button>
</div>
<!-- The Modal -->
<div id="{{ x.Id }}" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('1002').style.display='none'"
class="w3-button w3-display-topright w3-red">×</span>
<div class="w3-row-padding w3-margin">
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_1 }}" style="width:100%">
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_2 }}" style="width:100%">
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_3 }}" style="width:100%">
</div>
</div>
</div>
<div class="w3-row-padding w3-margin">
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_4 }}" style="width:100%">
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_5 }}" style="width:100%">
</div>
</div>
<div class="w3-third">
<div class="w3-card-2">
<img src="/administratie/assets/uploads/files/{{ x.Foto_6 }}" style="width:100%">
</div>
</div>
</div>
</div>
</div>
</div>
onclick is not accepted however I can't make the ng-click working either. Can someone please give me some hints how I can solve this?
First don't use onclick if you are using angularjs, use ng-click.
Second don't hide elements with pure javascript/jQuery by manipulating DOM elements, you are using AngularJS do it AngularJS way that being ng-show.
For simple purposes I will say you have 2 buttons one will show something one will close something. So on first button (open button) you should use ng-click="isShowing=true" and on second one (close button) will haveng-click="isShowing=false"
Then use ng-show="isShowing" which will set div to visible/hidden on whatever element you want to show. Keep in mind as long as button is not pressed isShowing property doesn't exist it will be undefined - falsy and it will not show, after click it will be set to true and show the div, then if you click on other button for closing it should set it to false and hide the div.
On your particular example on button that should show modal:
<button ng-click="isShowing=true" class="w3-button">Meer foto's</button>
and then on modal div:
<div id="{{ x.Id }}" ng-show="isShowing" class="w3-modal">
and in the end closing span:
<span ng-click="isShowing=false" class="w3-button w3-display-topright w3-red">×</span>
Keep in mind if you have some bad CSS styles this can interfere with the showing/hiding. And I would recommend this read as I can see you come from vanillaJS/jQuery background:
https://gabrieleromanato.name/introduction-to-angularjs-for-jquery-developers
I am trying to use an ng-repeat inside a Semantic UI accordion. However, once I included ng-repeat inside the div tag with the accordion class, the accordion doesn't open nor close anymore. Clicking it doesn't do anything.
The accordion works properly here:
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> Filename
</div>
<div class="content">
<a>File Link</a>
</div>
</div>
The accordion breaks once I include ng-repeat:
<div ng-repeat="file in files" class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> Filename
</div>
<div class="content">
<a>File Link</a>
</div>
</div>
I need to include the ng-repeat inside the accordion, and I need the accordion to do what it's supposed to do. Any help will be very much appreciated. Thank you!
<div class="ui styled accordion">
<div ng-repeat="file in files">
<div class="title">
...
ng-repeat and semantic ui needs to be separated
Is there a way to prevent the transition animation for the first page of bricks? I like the animation for resizing and appending but I would like the first page of bricks to appear in place without the animation.
I explored using the layoutComplete event but it gets triggered multiple times.
<div ng-controller="AppsCtrl" masonry masonry-options="{ transitionDuration: '0.4s' }">
<div ng-repeat="app in Apps" class="masonry-brick">
<div id="{{app.id}}" class="sz-card sz-app md-whiteframe-2dp">
<a href="#">
<div class="sz-card-image">
<div class="sz-app-image"><img src="../../app/images/{{app.imageFile}}"></div>
</div>
<div class="sz-card-details">
<div class="sz-card-name">{{app.name}}</div>
<div class="sz-card-settings"><md-icon></md-icon></div>
</div>
</a>
</div>
</div>
<div scroll-trigger="loadMore()" threshold="100"></div>
</div>
Try to use ng-cloak
<div ng-controller="AppsCtrl" ng-cloak ....
https://docs.angularjs.org/api/ng/directive/ngCloak
Seems like modals in Angular UI is difficult to update, previously in Bootstrap I could update via jQuery but in Angular UI, not able to do even a simple update.
I have <span id="spnApproveSelectedCount">0</span> inside my modal-body, and I update it using jQuery $('#spnApproveSelectedCount').text(selectedCount); like this. It was working in Bootstrap but not in Angular UI.
Even update from $scope is not working if that variable is inside the modal. But if I moved them outside of modal it is working. I suspect it is because the modal is not display yet?
Updated:
I have a repeat in which the each item is clickable. When user clicked on it, it's supposed to open up the modal with further info. Below are my codes.
<div class="list-group">
<div ng-repeat="approval in approvals" class="list-group-item">
<div class="row">
<div class="selectable" style="float: left; width: 95%" ui-turn-on="detailsModal" ng-click="SetDetails(approval)">
<p class="list-group-item-text"><b>Ref</b> <span>{{ approval.ref }}</span></p>
<p class="list-group-item-text"><b>Pay To</b> <span>{{ approval.payTo }}</span></p>
<p class="list-group-item-text"><b>From</b> <span>{{ approval.from }}</span></p>
</div>
</div>
</div>
</div>
Notice that I have the ng-click on the row and below are my codes at controller.
$scope.SetDetails = function(current)
{
$scope.details = current;
}
And also partial of my modal code..
<div class="modal" ui-if="detailsModal" ui-state='detailsModal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" ui-turn-off="detailsModal">×</button>
<h4 class="modal-title">Transaction Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-5">
Type
</div>
<div class="col-sm-7">
<b>{{ details.category }}</b>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-5">
Submitted By
</div>
<div class="col-sm-7">
<b>{{ details.submittedBy }}</b>
</div>
</div>
Before everything, in fact in my controller I have a line of code to pre-set the details variable to take the first element (before it is passed to ng-repeat), this works and when the modal open, it is showing the first element value and that's it, the value stays there even if I click on row 2, 3 ...
$scope.details = $scope.approvals[0];