I need to either hide or disable the href in this code when the user type is a 2 (vm.usertype === 2)
<div class="col-md-4 col-md-4">
<a href="#/newquote">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="row">
<div><h2><i class="fa fa-file-o"></i></h2></div>
</div>
<div class="row">
<div>New Quote</div>
</div>
</div>
</div>
</a>
</div>
I tried -
<div class="col-md-4 col-md-4" ng-disabled="vm.userType=='2'">
but that still enabled the link
You can hide it using ng-hide
<div class="col-md-4 col-md-4" ng-hide="vm.userType=='2'">
or just not setting the href to nothing
<a ng-href="{{ vm.userType=='2' ? '' : '#/newquote' }}">
Your link is still enabled because div as a standard html element doesn't have the option to be enabled or disabled. ng-disable will work file if that would be a button or radio button etc.
Not sure how exactly you imagine a disabled link would look like, but if I would need to display for the end-user a link if value is "vm.userType!='2'", I would use better ng-show="vm.userType=='2'" and this will display it when needed, and hide it otherwise.
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
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
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.
I am trying to get this ng-repeat loop to work with the bootstrap carousel, but the way I understand and am currently using the carousel elsewhere is that only one div containing an image can be marked with the 'active' class, and one div must be marked with active otherwise the carousel fails. It also fails if more than one is marked. One and only one div can be marked active. Every other div should just be marked 'class=item' How to do I make that happen with ng-repeat? Thank you.
<div class="carousel" id="slider" style="margin-left: 20px;">
<label class="labelSecurity">Incident Photos</label><br />
<div class="carousel-inner">
<div class="item active" ng-repeat="photo in photoPath">
<img src="{{ photo.path }}" class="img-responsive">
</div>
</div>
<a class="carousel-control right" href="#slider" data-slide="next"></a>
</div>
Then just mark the first one as active, like this:
<div class="item" ng-class="{active:!$index}" ng-repeat="photo in photoPath">
I'm losing my mind with this code:
<div class=" col-md-3 col-lg-2 hidden-xs hidden-sm">
<div class="panel-group" id="mainMenuCollapsible">
<div ng-repeat="item in menuItems">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#mainMenuCollapsible" href="#collapse_{{ $index }}">
{{ item }}
</a>
</h4>
</div>
<div id="collapse_{{ $index }}" class="panel-collapse collapse" >
<div class="panel-body">
BLA BL
</div>
</div>
</div>
</div>
</div>
</div>
There no chance to get this working. When I click the title of any panels page reloads showing the panel selected but with no visual effects. My code is exactly the same as bootstrap example.
I have all jss in the right place (jquery 2.0.3, bootstrap.min 3.0.2, angular 1.2).
I also tried removing ng-repeat and doing with a single panel with no luck. What am I missing? Many thanks.
Solved my self. It's angular that intercept the route #collapse_X. Using data-target instead of href:
data-target="#collapse_{{ $index }}"
solved perfectly!
Hope this helps someone.