Code below will display list of users from the database and i would like to enable paging / scrollbars for paper-listbox. Any help would be appreciated
<paper-listbox class="dropdown-content" attr-for-selected="value" selected="{{getSelectedItemID}}" on-iron-select="_itemSelected">
<template is="dom-repeat" items="[[getActiveCompanies]]" flex filter="{{Filter(filterValue)}}">
<iron-item value="[[item.ID]]" class="primary">{{item.CompanyCode}} - {{item.CompanyName}}</iron-item>
</template>
</paper-listbox>
first you have to import this : iron-scroll-target-behavior.html
after you can try this :
<div id="scrollable-element" style="display:block;height:300px;overflow-y: auto;">
<x-element scroll-target="scrollable-element">
<paper-listbox class="dropdown-content" attr-for-selected="value" selected="{{getSelectedItemID}}" on-iron-select="_itemSelected">
<template is="dom-repeat" items="[[getActiveCompanies]]" flex filter="{{Filter(filterValue)}}">
<iron-item value="[[item.ID]]" class="primary">{{item.CompanyCode}} - {{item.CompanyName}}</iron-item>
</template>
</paper-listbox>
</x-element>
</div>
good luck !
Related
Is the a polymer equivalent for ng-show? Here's a snippet example of what I'm trying to convert:
<h1>Greeting</h1>
<div ng-show="authenticated">
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</div>
<div ng-show="!authenticated">
<p>Login to see your greeting</p>
</div>
dom-if is not necessary here. Simply use $= (attribute binding) to add/remove hidden attribute.
<style>
[hidden] {
display:none;
}
</style>
<h1>Greeting</h1>
<div hidden$=[[!authenticated]]>
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</div>
<div hidden$=[[authenticated]]>
<p>Login to see your greeting</p>
</div>
Use dom-if to make decisions about blocks of code that you don't want to be rendered, not just hidden.
I guess you could use dom-if to conditionally keep required HTML in DOM tree. properties should be defined there in properties of component.
<template is="dom-if" if="{{authenticated}}">
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</template>
<template is="dom-if" if="{{!authenticated}}">
<p>Login to see your greeting</p>
</template>
True and False will work once you add template with in template. I tried
<template>
<template is="dom-if" if="{{authenticated}}">
{{authenticated}}
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</template>
<template is="dom-if" if="{{!authenticated}}">
{{authenticated}}
<p>Login to see your greeting</p>
</template>
</template>
If you will not add template with in template True, false will never work. It will always show you the first template wheather you have True or False value of properties.
Hope it works.
I am trying to create a tab-based dashboard in angular 2 and love material design's md-tab component, but am having trouble keeping persistent routes defined in the tab content groups. The code I pasted is just my mock up but ideally it would be great if I could have one to worry about and just have each tab route to different links, but I cant seem to find a working solution. Any help would be appreciated.
Code:
</md-toolbar>
<md-tab-group>
<md-tab>
<template md-tab-label>One</template>
<template md-tab-content>
<router-outlet></router-outlet>
</template>
<nav>
<!--a routerLink="/dashboards" routerLinkActive="active">One</a-->
</nav>
</md-tab>
<md-tab>
<template md-tab-label>Two</template>
<template md-tab-content>
<h1>HELLO</h1>
<router-outlet></router-outlet>
</template>
</md-tab>
<md-tab>
<template md-tab-label>Three</template>
</md-tab>
<md-tab>
<template md-tab-label>Four</template>
</md-tab>
<md-tab>
<template md-tab-label>Five</template>
</md-tab>
</md-tab-group>
</md-sidenav-layout>
I use accordion in my angularjs project.
I want to make headers rows in accordion even odd diffrent color.
Here is my view template:
<div class="container">
<div id="accordionWrapper">
<accordion close-others="true">
<!-- All Remaining Groups -->
<accordion-group ng-repeat="inspection in inspections.inspectionsDamage" is-open="isOpen" >
<accordion-heading>
<div class="text-center">
<strong>{{inspection.inspItemDesc}}</strong>
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
</div>
</accordion-heading>
<div class="col-md-3 col-xs-6 small">
<label>fix type: </label> {{inspection.inspItemDesc}}<br>
</div>
<div class="col-xs-12"><hr></div>
</accordion-group>
</accordion>
</div>
</div>
Here how it looks in the view:
And here is my desired view:
I tryed to add this rows :
ng-class-odd="'blueStyle'"
ng-class-even="'greenStyle'"
To this row:
<accordion-group ng-repeat="inspection in inspections.inspectionsDamage" is-open="isOpen" >
But I didn't get desired result.
Any idea How can I make odd even rows to be in diffrent colors in accordion bootstrap?
With CSS3 nth-child() selector,something like this should work:
accordion-group:nth-child(odd) {
/*background: #ff0000; your style here*/
}
accordion-group:nth-child(even) {
/*background: #0000ff;your style here*/
}
Update:
But as Micheal said it doesn't work ! Because there is no <accoridon-group > tag at all , instead code below will be generated:
<div class="panel panel-default" heading="Dynamic Group Header - 1" ng-repeat="group in groups">
<div class="panel-heading" ng-keypress="toggleOpen($event)">
<h4 class="panel-title"></h4>
...
</div>
</div>
So we have .panel-default and .panel-heading:
.panel-default > .panel-heading:nth-child(odd){
background:#00f5f5;
}
Up to now our styling works but due to nth-child CSS selector hierarchy issues all our target elements will be affected .
We have to act better:
.panel-default:nth-of-type(odd) .panel-heading{
background:#00f5f5;
}
It works as charm.
More about nth-of-type()
Refer this for Odd row color class
https://docs.angularjs.org/api/ng/directive/ngClassOdd
Refer this for Even row color class
http://docs.angularjs.org/api/ng.directive:ngClassEven
Similar answer in Stackoverflow
click here
The ng-class-odd and ng-class-even attributes work with the standard Bootstrap 3.3.6 CSS classes.
ng-class-odd="'panel-info'" <!-- blue panel class -->
ng-class-even="'panel-success'" <!-- green panel class -->
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups"
ng-class-odd="'panel-info'" ng-class-even="'panel-success'">
The DEMO on PLNKR.
I've seen this question and seen it answered but not in any way I can use or understand. The question is very specific and simple but somehow the answers are a bit over my head.
All I want to do is have a very simple menu work. when i menu item is clicked, I need it to of course use my angular controller function to handle it. I want all of that on the angular side. It actually does work when I simply use the elements directly without declaratively making my own.
So this works just fine and my ng-click is successfuly calling my acceptedSelect() in my controller:
<core-menu>
<div ng-repeat="order in acceptedOrders" ng-click="acceptedSelect(order)">
<paper-item class="my-paper-item" >
<div class="order-list-item">
<div class="order-number">{{order.Order}}</div>
<div class="order-date"> {{order.Date}} </div>
<div style="clear: both"></div>
<div class="order-address">
{{order.Property}}
</div>
</div>
</paper-item>
</div>
</core-menu>
But i do the same thing by wrapping the paper element in a polymer-element, it doesn't work. So this will not work:
<polymer-element name="my-app" attributes="refresh">
<template>
<style>
...
</style>
<core-menu>
<div ng-repeat="order in acceptedOrders" ng-click="acceptedSelect(order)">
<paper-item class="my-paper-item" >
<div class="order-list-item">
<div class="order-number">{{order.Order}}</div>
<div class="order-date"> {{order.Date}} </div>
<div style="clear: both"></div>
<div class="order-address">
{{order.Property}}
</div>
</div>
</paper-item>
</div>
</core-menu>
</template>
<script>
Polymer('my-app', {
});
<my-app></my-app>
I'm just not sure what I can do to make this work. Any help is greatly appreciated.
I've got the following markup:
<li ng-repeat="month in months">
<!-- NOTE THAT THIS IS WORKING IN ALL BROWSERS -->
<div class="cm-month-grid" ng-style="{width:{{month.pos.width}}+'px', left:{{month.pos.left}}+'px'}">
<div class="cm-month-title" title="{{month.date.format('DD.MM.YY')}} {{month.pos | json}}">{{month.date.format('MMM.YY')}}</div>
<div class="cm-month-border"></div>
</div>
</li>
that runs fine, but this is not:
<li ng-repeat="unit in units | filter: filter.text">
<div class="cm-periods">
<!-- BUT THIS IS NOT WORKING... WHY....
<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}" data-period="{{.}}}">
<span >{{period.start.format('DD.MM.YY')}}</span>
<div style="background: pink;" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}">jalla</div>
</div>-->
<!-- WORKING IN CHROME ONLY -->
<div ng-repeat="period in unit.periods" class="cm-period" style="width:{{period.pos.width}}px; left:{{period.pos.left}}px;" data-period="{{.}}}">
<span>{{period.start.format('DD.MM.YY')}}</span>
</div>
<!-- -->
</div>
</li>
Full example could be seen here: http://plnkr.co/edit/aZsZEM?p=preview
I know there are issues with style and IE, that's why I'm using the ngStyle, but it does not update it style (try clicking on the zoom in the full example in IE)
Thanks for any help
Larsi
You are using ng-style with double curly brackets. As far as I know that's not valid in an expression.
Try this:
<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}" data-period="{{.}}}">
<span >{{period.start.format('DD.MM.YY')}}</span>
<div style="background: pink;" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}">jalla</div>
</div>
</div>
Hmm, still looks messy to me. But, HEY! it zooms! (in FF)
Uh, forgot: Forked Plunk