I am using Angular Utils Pagination Directive in my app. Basically it works fine but problem is that when I filter table it doesn't show first page . For example in this plunker when I searched "meal 12" it hides the paging directive because it contains 1 record which is less than pagesize. I donot want to hide that instead it should show page1 . If filter is great than pagesize it works but when items less than pagesize it hides .
<li dir-paginate="meal in meals | filter:q | itemsPerPage: pageSize" current-page="currentPage" auto-hide="false">{{ meal }}</li>
I tried auto-hide="false" it doesnot work.
Need help?
You have an old version of the library, the version you have (at least, whats in your plunkr) doesn't support the auto-hide property.
Secondly, auto-hide is a setting for the controls, not the list, so you need to put it on the dir-pagination-controls element.
Related
I want to create in angular a page with 2 views. One, a navigation view has a list of ~1000 objects along with some options to filter them e.g.
<ul>
<li ng-repeat="object in objects| filter:query | subset:subsetOp">
{{objectname}}</a>
</li>
</ul>
The list of objects is obtained by a REST query using an Angular resource.
When the name of an object is clicked I want to main part of the page to query for additional information about the clicked object and display it.
The catch comes from the fact that I need the detail pages to have URL's that can be shared, bookmarked etc and that I don't want to have to re-query the list of objects all the time.
I can only find examples using ng-route to completely replace the page - loosing the navigation, our ui-route which seems to involve defining a list of states in javascript
I am using the sliders in the ionic framework and everything is working great. This is my html:
<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager={{showPager}}>
Pretty straightforward, notice that i am using showPager to dynamically show and hide the pager.
And in the controller:
$scope.showPager = true
$scope.slideHasChanged = ($index) ->
if $index == 4
$scope.$apply ->
$scope.showPager = false
It does as expected sets showPager value to false when the index of the slide is 4 in the web console.
BUT it does not really hide it on the web page. IF i explicitly set showPager to false, it does not display in the browser as expected, but if i try the above stuff to dynamically hide it, it does not work.
What am i missing?
<ion-slide-box> directive does not observe show-pager attribute. So it will consider only the value which was at the time of directive initialization.
For your use-case, you can show/hide pager by putting ng-class directive on <ion-slide-box> directive and based on that class you can write css to show/hide the pager.
Check this example codepen for working example.
I am using angular UI bootstrap type-ahead directive for type-ahead in a form
http://angular-ui.github.io/bootstrap/
I am fetching the records from remote server via $http service. It is working fine.
However I can select only one element from list at a time.
I want to select multiple values from the list and show all currently selected element in input field with a remove button just like tags for SO. The selected tags are stored in angular array model.
How to achieve this ?
I have read documentation for Angular UI bootstrap but I am not able to find anything.
This guy made a directive for this. Should do exactly what you want and it's even using the ui-bootstraps typeahead.
https://github.com/mbenford/ngTagsInput
The best solution I have found so far is io.select
it does exactly what you require, multi-select typeahead.
and the markup is neat and clean too e.g:
<oi-select
oi-options="list.id as list.description for list in lists"
ng-model="tags"
multiple
placeholder="Select">
</oi-select>
This component is also compatible with bootstrap and the new bootstrap 4.
In js file :
To list all selected items, use $item with typeahead-on-select and push to an array for ex.evtMem. delete fn to delete selected item.
HTML :
Use table to list all array values using ng-repeat. Addition to that add remove glyphicon image and function to delete corresponding item.
I am facing a strange behavior when testing an Angular JS application with protractor.
Considering this HTML structure , I would like to click on the inner div which is a filter.
<div ng-hide="term.selected" ng-click="selectFilter('target',term.value)" class="listItem">
<div>
<label class="ng-binding">ZECPFICO00</label>
<span class="listItemNum ng-binding">157</span>
</div>
</div>
Here is my locator :
element(by.repeater('term in facets.target | filter:ecSearchText').row(1)).click ();
When executing this code my webdriver cursor goes to the filter in the web page but and tries to click on the filter however the click does not work and therefore the filter is not applied.
1 - You don't need to specify the filters when using by.repeater it is optional
2 - Sirk is almost there, you need to continue chaining your promises, below an example of clicking on a div, you can use any by method here..
var elements = element.all(by.repeater('term in facets.target'));
elements.first().then(function (term) {
term.findElement(by.css('div')).then(function (div) {
div.click();
});
});
3- You could also do it this way:
element.all(by.repeater('term in facets.target')).get(0).click();
hmm I've never seen or used a locator that way where you have .row(1), but I am a noob so that just might be my own ignorance, however you could try something like the following:
element(by.repeater('term in facets.target | filter:ecSearchText')).then(function(rows){
rows[0].click();
});
That should click on the first row of the repeater. 'rows' would contain all the rows as an array.
I am doing pagination in cakephp. By default there is a list in
"$this->Paginator->numbers" but i want some changes in pagination design so i want all pages in dropdwon and current page is selected in dropdown. I successfully get the dropdown by writing the following code but the problem is that when i click on the page it wil not change
thanks in advance
`
< select>
echo $this->Paginator->numbers(array('tag'=>'option'));
</select>
`
You have to bind event onChange to your select element with JS. It should redirect you to selected page. You can see how to construct jump url in cake's documentation. You can also use this solution but notice it was written for cake 1.x and will need some changes.