I need some help with a problem I'm facing with pagination on AngularJS
Right now I have 3 tables, two of them have available items to select, and the third one, stores and show selected elements of the other tables, then I added pagination to each table, but I'm having some troubles with the selection table, If I add or remove elements individually, everything works as expected and the number of pages on selection table are updated.
The problem is when I use "Check All" function of the first table, the number of the pages doesn't get updated, I don't know what can I do in this case, I guess is something in check all funcition maybe but I run out of ideas right now
This is what I have so far:
http://embed.plnkr.co/e5P6iZ4W3P0Yb0YQy7Fu/preview
This is how the number of pages are calculated in numberOfSelectionPages function:
$scope.numberOfSelectionPages = function() {
return Math.ceil($scope.selection.length / $scope.pageSelSize);
};
And this is how the template is created on the html file:
<div class="pagination pagination-centered" ng-show="selection.length">
<ul class="pagination-controle pagination">
<li>
<button type="button" class="btn btn-primary" ng-disabled="curSelPage == 0"
ng-click="curSelPage=curSelPage-1"> < PREV</button>
</li>
<li>
<span>Page {{curSelPage + 1}} of {{ numberOfSelectionPages() }}</span>
</li>
<li>
<button type="button" class="btn btn-primary"
ng-disabled="curSelPage >= selection.length/pageSelSize - 1"
ng-click="curSelPage = curSelPage+1">NEXT ></button>
</li>
</ul>
</div>
This is what I used for pagination:
http://angulartutorial.blogspot.in/2014/03/client-side-pagination-using-angular-js.html
I hope maybe somebody can give me a hand on this
Thanks in advice!
Related
I want to create a list of "tags" that I could use for different pages of my website using react, but the problem I am having is that I need these lists of different tags to be different and editable on each page using it's id, but I'm new to react so I am unsure about how to approach this.
What I have right now is
<div className="input-tag">
TAGS
<ul className="input-tag__tags">
<li>
Tag
<span> </span>
<button type="button"> Remove </button>
</li>
<li className="input-tag__tags__input">
<input type="text" />
</li>
</ul>
</div>
Just a basic unordered list
I do have the course.id that tells me the id of the different pages, I know I should be using but I'm unsure on how to go about it, any help is appreciated thank you!
I would like to have two menus, where the choice in the first menu sets the options in the second menu. This is to be done on a Salesforce VisualForce page that is using Angular JS and specifically the UI-Grid module for it. Similar controls are using the Angular button classes for menus, but I don't see how to dynamically set the choices using a button.
My current design is using a select control and ng-options.
In the controller.js I have declared variables to be used by the menus and a function to swap out the array values for the second menu. Note that $scope.fieldOptions is set through a query to Salesforce to pull option values from quicklist fields. This array is used in the UI-Grid filter option that accepts in a format like "[ { value: '1', label: 'male' }, { value: '2', label: 'female' }...".
$scope.editRows = 'all';
$scope.editField = 'Program';
$scope.editValue;
$scope.editOptions = {};
$scope.setEditOptions = function(editField) {
switch (editField) {
case "Program" :
$scope.editOptions = $scope.fieldOptions.Program_Enrolled__c;
break;
case "Appl. ASSET" :
$scope.editOptions = $scope.fieldOptions.Applied_for_ASSET__c;
break;
case "4 Year Degree" :
$scope.editOptions = $scope.fieldOptions.Has_Student_Completed_4_Year_Degree__c;
break;
}
}
On the VisualForce page I have the buttons defined in a button group with the select control just after.
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12">
<div class="btn-group">
<div class="btn-group" dropdown="true" dropdown-append-to-body="true">
<button class="btn btn-default dropdown-toggle" dropdown-toggle="true" type="button">
{{editRows | capitalize}} Rows <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-click="editRows = 'all'">All Rows</li>
<li ng-click="editRows = 'visible'">Visible Rows Only</li>
<li ng-click="editRows = 'selected'">Selected Rows Only</li>
</ul>
</div>
<div class="btn-group" dropdown="true" dropdown-append-to-body="true">
<button class="btn btn-default dropdown-toggle" ng-click="setEditOptions(editField)"
dropdown-toggle="true" type="button">
{{editField | capitalize}} <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-click="editField = 'Program'">Program Enrolled</li>
<li ng-click="editField = 'Appl. ASSET'">Applied for ASSET</li>
<li ng-click="editField = '4 Year Degree'">4-year degree?</li>
</ul>
</div>
<div>
<select ng-model="editValue" ng-options="option.label for option.value in selectOptions">
</select>
</div>
</div>
<button id="split-button" type="button" class="btn btn-default" ng-click="massUpdate()">Modify</button>
</div>
</div>
Am I on the right track? If there is an easier method, or one that would use a button menu directly, please feel free to offer suggestions. Otherwise, is the issue how I am using ng-options?
Okay, easier than I thought. Two typos. First, I had the array declared with {} instead of []. And I misspelled it in the select statement ng-options section. Fixed that and it's working.
If anyone knows any tricks to get this working with a button so it would match the others though, that would be wonderful. Otherwise I'm thinking I'll go with all selects for consistency. Also, maybe bundle these options into an array with the primary menu choices as the keys so I can just reference without the case statement.
$scope.editRows = 'all';
$scope.editField = 'Program';
$scope.editValue;
$scope.editOptions = {};
If anyone can help, I'd be very thankful. I am pretty new to AngularJS and trying to learn it. The problem I got is that one of controllers are not called when button Bought is pressed
<div class="col-md-6" ng-controller="AlreadyBoughtController as Items">
<h2>Already Bought:</h2>
<ul ng-repeat="bought in Items.ItemsBought track by $index">
<li>Bought {{bought.quantity}} {{bought.name}}</li>
</ul>
<div class="emptyMessage" ng-if="Items.ItemsBought.length === 0">Nothing bought yet.</div>
</div>.
Please look complete code with app.js file on plunker:
http://plnkr.co/edit/8wKY7PPZ6mINsFGCJQfP?p=preview
That's because you were never actually passing the index of the item you bought.
<li>Buy {{item.quantity}} {{item.name}} <button class="btn btn-default" ng-click="itemsToBuy.boughtItems($index);"><span class="glyphicon glyphicon-ok"></span> Bought</button></li>
Pass $index to your function: ng-click="itemsToBuy.boughtItems($index);
Take a look at the fixed plunk.
I am trying to use range slider in angularjs to filter the grid. I want a greater than and less than filter in my ng-repeat. But I am not getting how to do this. I am using the following code for now. But this is not working for me. This code is not giving me desired output
Here is my html for grid
<div class="col-md-3 product-left-grid" ng-repeat="data in Products| filter:priceSlider.max |filter:priceSlider.min">
<div class="product-grid"></div>
<div class="product-grid-text">
<a href="javascript:void(0)">
<img alt="" src="{{data.Picture1}}">
</a>
<div class="products-grid-info">
<div class="price">
<a class="btn btn-sm btn-width btn-default btn-font-weight"
href="javascript:void(0)"
ng-click="viewDetails($index)">Quick View</a>
<a href="javascript:void(0)"
class="btn btn-sm btn-width btn-default btn-font-weight"
ng-click="addToCart (data.ProductID,data.Picture1,data.ProductName,data.UnitPrice,data.Discount,data.ShippingCharges,data.wieght)">Add to cart</a>
<div class="tovar_description clearfix">
<a class="tovar_title" href="#"><b>{{data.ProductName}} </b> | {{data.UnitPrice | currency:mycurrency}}</a>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
this is my price range slider
<rzslider rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max"
rz-slider-on-change="onSliderChange()"></rzslider>
Now I am using filter but I have doubt that I am going wrong somewhere. Please experts help to solve this problem. Price range filter I need like every eCommerce website have.
Thanks
You have to make a custom filter :
//create an angular filter named "price"
app.filter('price', function () {
//our function will need three arguments
return function(items, greaterThan, lowerThan) {
//then we filter the array with dedicated ES5 method
items = items.filter(function(item){
//if item price is included between the two boundaries we return true
return item.price > greaterThan && item.price < lowerThan;
});
//then we return the filtered items array
return items;
};
});
You can see how Array.filter() works here
Our function will need 3 arguments to work, the items list which is passed by default and the lower and higher boundaries that we will pass as arguments in our ng-repeat filter.
Then you can use the filter as follow :
<div ng-repeat="data in Products | price:priceSlider.min:priceSlider.max | orderBy:'price'">...</div>
As I said above, items array is passed by default, then, to specify other parameters you have to separate them with a colon : right after the filter name.
You can read about custom filters in the official documentation here.
Finally you can then specified as many other filters as you want by separating them with a pipe |.
In our example I'm ordering them by price after the array has been filtered.
Here is a working JSFiddle.
I've a situation where I want to display an error message on the page when my modal don't have any records to show. This could be on the initial load or after applying some filter criteria on the page.
I'm using ng-if to check the count of records on the result set after applying the filter, that is why when my page initially loads as there is no data in the filtered result rest it is showing up the error message first and then later it is showing the data.
Any insight would be highly appreciated
prod.skulist is my modal.
<ul class="prd-list">
<li ng-repeat=" p in filtered =(prod.skulist | categoryFilter:prod.selectedFormat :prod.selectedRating) | filter :priceRange" id=" {{p.sku}}">
<figure class="prd-img" ng-click="wrapCtrl.showProdDetils(p.sku,prod.catName)">
<div style="background-image: url({{wrapCtrl.imageLocation+p.image}}); background-repeat: no-repeat;"></div>
<figcaption class="prd-nam f8">{{p.title}}</figcaption>
<span class="new-item" ng-show="{{p.isnew}}"><img src="Content/images/new.png" /></span>
<span class="new-item" ng-show="wrapCtrl.compareStreetDate(p.streetdate)"><img src="/Content/images/coming-soon.png" /></span>
</figure>
<div class="prd-price f5">
{{p.currentprice | currency}}<span class="sales" ng-show="{{p.onsale}}">ON SALE</span>
<span class="cart-btn" ng-click="wrapCtrl.addCart($event)"></span>
<div class="inactive-cart-btn" ng-show="wrapCtrl.compareStreetDate(p.streetdate)"></div>
</div>
</li>
</ul>
<div ng-if="(filtered | filter :priceRange).length ==0" class="error-box">
<div class=" wrp"><span class="error-head">I hate when this happens</span></div>
<div class="wrp error-message">
<span class="f9 pad-top">It looks like I don't have exactly what you are looking for.</span>
<span class="f9 pad-bot">try adjusting your filters to see more</span>
</div>
</div>
I ran into a similar situation and found an ugly, though working solution by using the $timeout service. In your case you would have a scope variable, lets call it loadTimeGiven = false and after the $timeout you set it to true. Then simply do
ng-if="(filtered | filter :priceRange).length ==0 && loadTimeGiven"
Alternatively you could set loadTimeGiven based on a service that your modal has access to.