I'm looking for the definition of table lists in Angular Material. Currently I've found the md-list directive, but it doesn't allow me to display the table on the whole screen (e.g. like in Bootstrap with the col-md-12 etc.)
Is there a possibility to implement it?
Example code:
<div layout="row" class="layout-align-center-center">
<md-list ng-cloak layout="column">
<md-list-item class="md-2-line" ng-repeat="item in todos">
<div class="md-list-item-text" layout="column">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</div>
<md-divider></md-divider>
</md-list-item>
</md-list>
</div>
I'm not sure if this is the kind of thing you are looking for. But, you could try md-data-table.
There are others as well. This one seems to follow the Angular Material patterns pretty well.
Related
Problem with my approach is when the device width shrinks or switch my view to Mobile View, the chips are overflowing past the screen size. I wanted the chips to be aligned responsively with the screen size.
I tried implementing the div with flex but not luck.
Here's the code
<div layout="row">
<div layout="row">
<md-chips ng-repeat="filter in filters" readOnly="true">
<md-chip class="chipStyling">
{{filter.name}}
</md-chip>
</md-chips>
</div>
</div>
I created a Code Pen to show the working example. Could anyone please review and let me know what I was doing wrong.
You were on the right track with adding flex, but you needed to tell it to wrap as well. On the second row, you can add the following css..
display:flex;
flex-wrap:wrap;
I know nothing about Angular Material, but just looking at the docs, it seems you can add the flex-wrap:wrap by adding layout-wrap to the container element
<div layout="row">
<div layout="row" layout-wrap>
<md-chips ng-repeat="filter in filters" readOnly="true">
<md-chip class="chipStyling">
{{filter.name}}
</md-chip>
</md-chips>
</div>
I am using Angular Material md-select with the multiple flag
<div layout="row"
<md-input-container class="md-block" flex-gt-sm>
<label>Pick State</label>
<md-select multiple flex ng-model="main.selectedData.State">
<md-option ng-repeat="(key, value) in main.State" value="{{value.value}}">
{{value.display}}
</md-option>
</md-select>
</md-input-container>
</div>
When I select my multiple options, everything works as expected on the controller end, but in the view my options stack vertically.
I would like to list them horizontally. So instead of:
AR,
CA
I would get:
AR, CA
I think the problem is that the rendered DOM comes out like this:
<md-select-value class="md-select-value" id="select_value_label_1">
<span>
<div class="md-container">
<div class="md-icon"></div>
</div>
<div class="md-text ng-binding">
AR
</div>
,
<div class="md-container">
<div class="md-icon"></div>
</div>
<div class="md-text ng-binding">
CA
</div>
</span>
<span class="md-select-icon" aria-hidden="true"></span>
</md-select-value>
So if I try to add my own CSS to float: left or something like that, I get this:
I have reported this on Github as well, but I'm not sure they consider it a bug, so I am trying to find a work around short of rewriting or altering the module itself.
css:
._md-container{
display: inline-block;
}
http://codepen.io/nsuthar0914/pen/pbgxWo
I want to use Angular Material menu-item to look this below.
Before:
After:
You can implement this in following way
HTML:
<md-menu>
<md-menu-content>
<md-menu-item>
<div layout="column">
<md-icon></md-icon>
<span>Google +</span>
</div>
<div layout="column">
<md-icon></md-icon>
<span>Search</span>
</div>
<div layout="column">
<md-icon></md-icon>
<span>YouTube</span>
</div>
</md-menu-item>
</md-menu-content>
</md-menu>
that md-menu-item is the first row. Like that you can enter any number of rows
I'm new to both of Ionic framework and angular js which I find really helpful.
I'm stuck with a tiny problem. I'm not able to make routing pages. I just wanna link two pages dynamically.
on the first page I have a list of friends using ng-repeat.
when I click on a list item I want to show another page which contains all the details of the friend selected.
I was confused reading both of Angular js and Ionic documentation. so can you pease help with a simple code.
here is my code :
CODEPEN
<div ng-controller="MyCtrl">
<ion-content>
<div class="list">
<div class="item item-divider">
Friends
</div>
<a class="item" href="#" ng-repeat="item in items">
<h3>{{item.name}}</h3>
</a>
</div>
</ion-cotent>
</div>
<script id="friend.html" type="text/ng-template">
<view left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true" title="'Awesome'">
<content padding="true" has-header="true">
<h1>Friend details</h1>
</content>
</view>
</script>
I edited your CodePen, have a look. Yes you were missing $state, as well as anuglar.config. I hope you get clear on how to use states and how to pass data between them.
CodePen
My index.html page is like following:
<div id="sidepanel" ng-controller="myCtrl">
<ul class="drop-down">
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
</div>
<div id="mainpanel" ng-controller="listCtrl">
<div ng-view></div>
</div>
For this ng-view I have record-list.html to show all the records which is like following:
<div class="container">
<ul class="design">
<li id="{{record.name}}" ng-repeat="record in records">
<div>......</div>
</li>
</ul>
</div>
Now i want to add the same structure (as like each record) append on the click of each item of the side panel.
what is the logic for that ?
My recent UI Looks like this & i want to add the same structure on each click which should be append the existing structure.
Please Help.Thanks.
It sounds like perhaps each "record" has a set of children "records." If this is the case, I would recommend using angular's ng-switch directive to conditionally display the correct (or no) set of sub-records on the side.