AngularJs and Laravel working with nested routes - angularjs

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>

Related

Listen custom Button click and re-render dates in controller for angularJs datePicker popup

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

How to use ng-mouseover for hide and show input element on mouse hover

Here is my code:-
<div class="input-group">
<input class="form-control" ng-model="name" required />
<span class="input-group-btn">
<button class="btn btn-primary" type="button" >
<i class="fa fa-plus"></i>
</button>
</span>
</div>
Here I am using bootstrap class input-group which contains two elements i.e <input> and <span>
So here I want to show that button on mouse hover.
So I tried by using ng-mouseover
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-mouseover="open" >
<i class="fa fa-plus"></i>
</button>
</span>
Where open is :-
$scope.open = true;
I think ng-mouseover is better option but if is there any other simple way.... please tell me
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
$scope.open = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<div ng-mouseover="open = true" ng-mouseleave="open = false">
To display button mouseover here!!!
<button class="btn btn-primary" type="button" ng-show="open">
<i class="fa fa-plus">Button</i>
</button>
</div>
</div>
try this. also you can use :hover for show/hide element.
<button class="btn btn-primary" type="button" ng-show="open" ng-mouseover="open = true" >
<i class="fa fa-plus"></i>
</button>

AngularJS if-then-else construction with nested expressions

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.

Button in AngularJS grid not being disabled

I have the following condition set in my grid-butto-listchecks.html file, but it doesn’t disable the row in the search results. Do you know what might be wrong? I know the controller that I'm using is the correct controller.
HTML file
<div class="ui-grid-cell-contents">
<button title="Edit" type="button" class="btn grid-icon btn-xs btn-primary" ng-disabled="row.entity.ClaimStatusDescription=='Submit to Corporate GL'" ng-click="grid.appScope.gridCtrl.editRow(grid, row,row.entity.CheckDepositHeaderId)">
<i class="fa fa-edit"></i>
</button>
<button title="View" type="button" class="btn grid-icon btn-xs btn-primary" ng-click="grid.appScope.gridCtrl.viewRow(grid, row)">
<i class="fa fa-file-text"></i>
</button>
<button title="Delete" type="button" class="btn grid-icon btn-xs btn-primary" ng-disabled="row.entity.ClaimStatusDescription=='Submit to Corporate GL'" ng-click="grid.appScope.gridCtrl.deleteRow(grid, row)">
<i class="fa fa-trash "></i>
</button>
</div>
Grid button field
{ field: 'CheckDepositHeaderId', name: '', cellTemplate: root + 'template/Check_Deposit/grid-butto-ListChecks.html', width: 90 },
You can see in the search results that I have that description coming out in the row (see image).

ng-if displaying both the div elements

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. :)

Resources