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
Related
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];
I have an array of products. I would like to display them in rows, with 4 products per row. Right now my code is
<div ng-repeat="product in products" class="col-md-3">
<p> {{product.name}} </p>
<p> {{product.price}} </p>
</div>
However, this is not displaying properly. I have tried to incorporate rows with an ng-if, but this is as close as I've come:
<div ng-repeat="product in products">
<div ng-if="$index %4 == 0" class="row">
<div class="col-md-3">
(content)
</div>
</div>
<div ng-if="$index %4 != 0" class="col-md-3">
(content)
</div>
</div>
I think I know why the above doesn't work: if index %4 != 0then the column that is created is not actually put inside of the row made before.
Is there an angular way to do this? Do I need a custom directive? Note: I have managed a solution not using angular directives but it doesn't seem clean, so I would like to do it "angularly" if possible.
You should be able to use your first method just fine, here's the html I wired up in a js fiddle:
<div ng-app="app">
<div ng-controller="ParentCtrl">
<div class="container">
<div class="row">
<div data-ng-repeat="option in options" class="col-md-3">
{{ option }}
</div>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/ubexop9p/
You will have to play around with the frame sizes if your monitor is too small, but I was able to get it do what you wanted.
Do you have that wrapped in a container or container-fluid? I believe that's required for the grid system to work.
<div class="container">
<div class="col-md-3">Col 1</div>
<div class="col-md-3">Col 2</div>
<div class="col-md-3">Col 3</div>
<div class="col-md-3">Col 4</div>
<div class="col-md-3">Col 5</div>
</div>
Turns out it was a problem with the content I was putting inside the columns, the code I posted does in fact work.
What's the best practice of toggling elements in nested ng-repeaters? I have the following angular template:
<div>
{{question.Description}}
<div ng-repeat="answer in question.Answers">
{{answer.Description}}
<div ng-repeat="qAnswer in answer.Questions"><!-- Hide/show here -->
{{qAnswer.Description}}
<div ng-repeat="childAnswer in qAnswer.Answers"><!-- Hide/show here -->
{{childAnswer.Description}}
</div>
</div>
</div>
</div>
Edit:
I'd like to toggle based on click action
<div>
{{question.Description}}
<div ng-repeat="answer in question.Answers">
{{answer.Description}}
<div ng-repeat="qAnswer in answer.Questions" ng-show="answer.show"><!-- Hide/show here -->
{{qAnswer.Description}}
<div ng-repeat="childAnswer in qAnswer.Answers" ng-show="qAnswer.show"><!-- Hide/show here -->
{{childAnswer.Description}}
</div>
</div>
</div>
</div>
u need to set the object value to true or false, then angularjs will do the rest.
Try something like this,
<div ng-init="items_display=[]">
{{question.Description}}
<div ng-repeat="answer in question.Answers">
{{answer.Description}}
<div ng-repeat="qAnswer in answer.Questions"><!-- Hide/show here -->
{{qAnswer.Description}}
<div ng-repeat="childAnswer in qAnswer.Answers" ng-show="items_display[$index]"><!-- Hide/show here -->
{{childAnswer.Description}}
</div>
</div>
</div>
</div>
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.