I'm in the middle of learning Angular, and I am attempting to show or hide contents in a content div depending on side menu items being clicked.
<div id="side-menu">
<h3>Side Menu</h3>
<div ng-repeat="item in example">
<p ng-click="collapsed=!collapsed">
API Name: {{ item.name }}
</p>
</div>
</div>
<div id="content">
<h3>Content</h3>
<!-- What do I have to add here to "connect" to "item in example"? -->
<div ng-show="collapsed">
<p>Debug: {{ item.debug }}</p>
<p>Window: {{ item.window }}</p>
</div>
</div>
What do I have to add to controller ng-show from the other div?
Use $parent:
ng-click="$parent.collapsed=!$parent.collapsed"
Example: http://jsfiddle.net/cherniv/6vhH3/
Read this to understand the most important basics of Angular' scopes.
Related
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
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];
In my application there is a carousel with images that I get from my service. Under the carousel there are 3 buttons that give more information about the image.
These information buttons should replace the bullet indicators for a standard carousel. The buttons get an active class when the corresponding image is displayed so it stands out from the other 2.
Below is my code, I'm using this carousel
<ul rn-carousel>
<li ng-repeat="promo in promos">
<img ng-src="{{ promo.slider[0].slide }}" alt="{{ promo.name }}">
</li>
</ul>
<div ng-repeat="promo in promos">
<button>
<h2>{{ promo.name }}</h2>
<p>- {{ promo.descr }} <span>{{ promo.disc }}</span></p>
</button>
</div>
I have no problems getting the info out of my service, it's just the linking part that is giving me problems.
I found the solution after searching through the issues page of the carousel I'm using.
<ul rn-carousel rn-carousel-index="currentSlide">
<li ng-repeat="promo in promos">
<img ng-src="{{ promo.slider[0].slide }}" alt="{{ promo.name }}">
</li>
</ul>
<div ng-repeat="promo in promos">
<button ng-class="{activeBtn: $index==$parent.currentSlide}" ng-click="$parent.currentSlide = $index">
<h2>{{ promo.name }}</h2>
<p>- {{ promo.descr }} <span>{{ promo.disc }}</span></p>
</button>
</div>
I had to name my carousel-index and for my indicators I had to refer to the parent element for the binding to work.
Thanks to Capricorn for leading the way.
I have simple question but i can't find answer so many hours...
I would like to make something like google search. If it's empty then only one styled input box is on center of the screen, but when typing some text inside, div with filtered ng-repeat is shown, and input is on the top of the page. That input is also filter.
It looks something like this, and that works, but i can't figure out how to change style of div that is parrent to input, based on input value, or more precisely if it is empty or not.
Also any more elegant solution to this would be appreciated.
<div ng-class="header">
Search: <input type="text" ng-model="query"/> {{query}}
</div>
<div ng-switch on="query">
<div ng-switch-when="">
</div>
<div ng-switch-default>
<div class="product_list">
<div ng-repeat="product in products | filter:query" class="product_block">
<p id="name">{{ product.name }}</p>
</div>
</div>
</div>
Just use ng-show, ng-hide.
<div ng-class="{HeaderNoInput: query=='', HeaderHasInput: query!=''}">
Search: <input type="text" ng-model="query"/> {{query}}
</div>
<div ng-hide="query">Nothing to list.</div>
<div ng-show="query">
<div class="product_list">
<div ng-repeat="product in products | filter:query" class="product_block">
<p id="name">{{ product.name }}</p>
</div>
</div>
</div>
I try display in loop data but without repeating div with ng-repeat.
Example:
<div ng-repeat="item in widget" ng-include="includeFile(item.type)"></div>
Output:
<div class="ng-scope" ng-include="includeFile(item.type)" ng-repeat="item in widget">
data from template
</div>
<div class="ng-scope" ng-include="includeFile(item.type)" ng-repeat="item in widget">
data from template
</div>
I want output data in one div:
<div>
data from template
data from template
</div>
How can I do this in Angular?