There are 2 div tags, i want to display only 1 based on value of SelectedVariant.InCart.
Code is as follows:
<div ng-if="1==0">
<a class="btn btn-success btn-md" ng-click="AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div ng-if="1==1">
<a class="btn btn-default btn-xs" ng-click="PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-info disabled">{{3+2}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
<a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
But it displaying both the div elements. Can someone help me what is the issue?
your angular version is 1.0.7. directive ng-if is not in this version of angular.
its introduce in angular 1.1.5
check it in angular under Directives topic change log
AngularJS first added the ngIf directive in 1.1.5
please update the angular version and that will solve your problem. :)
Related
<button ng-href="#!/edit/{{a.id}}"
type="button"
class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-edit"></span>
Edit
</button>
Nothing happens when I click on the button. But It goes to the link I want if I use
<a ng-href="#!/edit/{{a.id}}> Edit </a>
How can I use a button for this routing? Thanks
The issue is that <button> elements don't support the href attribute.
What you can try instead is to style your <a> element to look like a button using Bootstrap's classes.
<a ng-href="#!/edit/{{a.id}}"
class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-edit"></span>
Edit
</a>
I have overridden datepicker popup to add a custom button.
My custom button is wrapped inside <script id="template/datepicker/popup.html" type="text/ng-template">
directive.
I can see the custom button like the picture below but I want to listen the click of "Regular Price" button in my controller and re-render all the dates of calendar with some new custom css. I was unable to get any event in my controller using ng-click for the custom button.
How can I achieve it in my controller ?
Edit
Html
<!-- Overriding code for popup calendar-->
<script id="template/datepicker/popup.html" type="text/ng-template">
<ul class="uib-datepicker-popup dropdown-menu" dropdown-nested ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<!-- regular price button -->
<button type="button" class="btn btn-sm btn-warning" ng-click="regularPrice()">Regular Price</button>
<!-- /regular price button-->
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close()">{{ getText('close') }}</button>
</li>
</ul>
</script>
<!-- /Overriding code for popup calendar -->
<div class="text-center">Check-in</div>
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="check_in_date" is-open="checkInOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-change="selectedCheckinDate(check_in_date)" min-date="{{minDate}}" date-disabled="disabled(date, mode)" custom-class="getDayClass(date, mode)" show-weeks="false" disabled="disabled" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCheckIn($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
In controller
$scope.regularPrice = function(){
alert('regular selected');
};
Since uibDatepickerPopup directive creates an isolated scope and ng-include creates a child scope, regularPrice handler defined in your controller could be accessed like this: $parent.$parent.regularPrice()
Here is a modified popup template:
<div>
<ul class="uib-datepicker-popup dropdown-menu" dropdown-nested ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
<!-- regular price button -->
<button type="button" class="btn btn-sm btn-warning" ng-click="$parent.$parent.regularPrice()">Regular Price</button>
<!-- /regular price button-->
<li ng-transclude></li>
<li ng-if="showButtonBar" style="padding:10px 9px 2px" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
</ul>
</div>
Demo
I create dynamically a table and I want the two buttons in the last table cell of each row only if x.deviceID==="-" evaluates to false.
<tr class="contentRow" id="tableRow{{x.deviceID}}" ng-repeat="x in deviceData| filter:search">
<td>{{x.deviceID}}</td>
<td>{{x.otherID}}</td>
<td>{{x.aaaa}}</td>
<td>
//this two buttons should only be there if x.deviceID==="-"
<button type="button" class="btn btn-xs btn-default" data-deviceid="{{x.deviceID}}">
<span class="glyphicon glyphicon-info-sign"></span>a
</button>
<button type="button" class="btn btn-primary btn-xs" data-deviceid="{{x.deviceID}}">
<span class="glyphicon glyphicon-info-sign"></span>b
</button>
</td>
</tr>
My first approach was:
<td>{{x.deviceID}}</td>
<td>{{x.otherID}}</td>
<td>{{x.lastGpsDate}}</td>
<td>{{x.deviceID==="-" ? : '<button type"button" class="btn btn-xs btn-default" data-deviceid="{{x.deviceID}}"><span class="glyphicon glyphicon-info-sign"></span>a.....'}}
but this won't work. The last cell of the row will always look like this {{x.deviceID==="---"? : ' BUTTON BUTTON'}}. BUTTON is a real html button, not a string!
Use ng-if to solve the problem
<button ng-if="x.deviceID == '-'" type="button" class="btn btn-xs btn-default" data-deviceid="{{x.deviceID}}">
<span class="glyphicon glyphicon-info-sign"></span>a
</button>
Wrap both inside a div and use ng-if or ng-hide to solve the problem
<tr class="contentRow" id="tableRow{{x.deviceID}}" ng-repeat="x in deviceData| filter:search">
<td>{{x.deviceID}}</td>
<td>{{x.otherID}}</td>
<td>{{x.aaaa}}</td>
<td>
<div ng-if="x.deviceID === '-'">
//this two buttons should only be there if x.deviceID==="-"
<button type="button" class="btn btn-xs btn-default" data-deviceid="{{x.deviceID}}">
<span class="glyphicon glyphicon-info-sign"></span>a
</button>
<button type="button" class="btn btn-primary btn-xs" data-deviceid="{{x.deviceID}}">
<span class="glyphicon glyphicon-info-sign"></span>b
</button>
</div>
</td>
</tr>
You could also use ng-hide with the same condition as well.
ng-if removes it from DOM &
ng-hide just sets its display to false, but the buttons would still be in the DOM.
I am new to angularjs and I donl quite know how to make it work with nested routes.
In my Laravel routes file i have set up a route like movie{id}/review{id} and I need to make it work restfully with angular.
The problem is that I do a loop for all the movies then for all the reviews, in PHP that would be simple but with Angular I can't access the id of the movie in the reviews loop.
I have set up different controllers for movies and reviews both for Laravel and Angular.
Here is the html part for angular, note that I use modal for the create and edit forms.
<div class="row" ng-app="movies" ng-controller="moviesController">
<h2>All movies</h2>
<div ng-repeat="movie in movies" ng-init="movId = movie.id">
<blockquote>
<strong class="text-center "><% movie.title %></strong>
<p><% movie.description %></p>
{{--<footer><% movie.review %></footer>--}}
</blockquote>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary btn-sm" ng-click="editMovie(movie.id)">
Edit Movie
</button>
<button type="button" class="btn btn-primary btn-sm" ng-click="deleteMovie(movie.id)">
Delete Movie
</button>
<div ng-controller="moviesReviewController">
<div ng-repeat="movieReview in movieReviews">
<blockquote>
<strong class="text-center "><% movieReview.title %></strong>
<p><% movieReview.body %></p>
<footer><% movieReview.stars %></footer>
</blockquote>
<button type="button" class="btn btn-primary btn-sm" ng-click="editMovieReview(movId, movieReview.id)">
Edit Movie
</button>
<button type="button" class="btn btn-primary btn-sm" ng-click="deleteMovieReview(movId, movieReview.id)">
Delete Movie
</button>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" ng-click="movieId = movId" data-target="#movieReviewModal">
Post a review
</button>
</div>
</div>
<p class="text-center" ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#moviesModal">
Add New Movie
</button>
I need to use a dropup menu.
This code worked perfectly with ui-bootstrap-tpls-0.10.0.js:
<div class="btn-group dropup">
<button type="button" class="btn btn-default" ng-click="print('PDF')">{{text}}</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="print('PDF')">Pdf</a></li>
<li><a ng-click="print('EXCEL')">Excel</a></li>
</ul>
</div>
After upgrading to ui-bootstrap-tpls-0.11.0.js, the dropup popup doesn't show anymore. Any help appreciated. The dropdown still works as expected.
Add the dropdown attribute to your outer div:
<div class="btn-group dropup" dropdown>