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?
Related
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 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).
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>
I have the following
<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>
When we click on the + sign, it gives me a panel with 2 buttons. These buttons are set to default. But i want to have a function that sets the button to primary whenever clicked(active), and go back to default when it is unclicked or another button is clicked.
How do i achieve this functionality?
Just use ng-class, along with the variables you are already setting to toggle display:
<button type="button" ng-class="{'btn-primary': display.academic}" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" ng-class="{'btn-primary': display.appliedsciences}" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>
Here is a working demo: http://plnkr.co/edit/cAqxxmaS7pjfhfSgCsWL?p=preview
Note: I took a shot at consolidating some of the logic in the showMoreFunc function. I think this works, but your original code worked perfectly well with ng-class:
$scope.showMoreFunc = function(view) {
$scope.display.appliedsciences = (view == "appliedsciences" && !$scope.display.appliedsciences);
$scope.display.academic = (view == "academic" && !$scope.display.academic);
}
Using the Buttons (Radio) from http://angular-ui.github.io/bootstrap/ :
Change
<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" ng-model="academic">Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" ng-model="appliedsciences">Applied Sciences</button>
to
<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" ng-model="radioModel" btn-radio="'Left'">Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" ng-model="radioModel" btn-radio="'Right'">Applied Sciences</button>
and in your controller add
$scope.radioModel = 'Left';
Result, if btn Academic is 'active'
and this if btn Applied Sciences is 'active'
I think best way is using pure css to deal with this.
.btn:focus{
outline: 0 !important;
}
.btn:active {
outline:0;
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
I wrote a simple plnkr demo with bootstrap 3.1, when you clicking default button, It will change to primary color.
checkout http://plnkr.co/edit/KJR8xL?p=preview
This will work
<button type="button" ng-class="{'btn-primary': display.academic}" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" ng-class="{'btn-primary': display.appliedsciences}" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>