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).
Related
Can some on tell me if there is smething wrong with the below code as I am unable to get the buttons toggled
<div class="modal-footer textAlignLeft">
<button type="button" class="btn btn-sm btn-default"
name="close" ng-show="!closeHidden"
ng-click="cancel()">CLOSE</button>
<button type="button" class="btn btn-sm btn-default"
name="cancel" ng-show="closeHidden"
ng-click="cancelUpload()">CANCEL</button>
<button type="button" class="btn btn-sm btn-primary marLeft10"
name="attachfile" id="uploadBtn"
ng-click="attach()" ng-disabled="attachDisabled">
{{ resource["common.attachbtn"] }}
</button>
</div>
Once I click on attach button, I want the close button to disappear and the cancel button to show up. But it always shows only the close button though I see the scope variable scope.closeHidden updated to true in my code. Any hints?
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.
Search button html code.
<button type="button" class="btn form-control customSelect dropdown-toggle" dropdown-toggle="" ng-disabled="disabled" aria-haspopup="true" aria-expanded="false">
<span class="custom-text ng-binding">Initial Status</span><span class="glyphicon glyphicon-chevron-down"></span>
</button>
Other button html code
<button type="button" class="btn form-control customSelect dropdown-toggle" dropdown-toggle="" ng-disabled="disabled" aria-haspopup="true" aria-expanded="false">
<span class="custom-text ng-binding">No Filter</span><span class="glyphicon glyphicon-chevron-down"></span>
</button>
Please help me.
Try this :
var searchbtn = element.all(by.css('.btn')).get(0);
searchbtn.click();
or
var searchbtn = element.all(by.type('button')).get(0);
searchbtn.click();
Here get(0) means first button.
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>