I want to have a md-menu on a md-2-line list-item directive. note: NOT on the secondary action but primarily on the list item itself. The documentation states that the first element is used as trigger and is left in the DOM, while the second represents the menu contents. So I was surprised that the following structure does not work.
<md-list>
<md-menu>
<md-list-item class="md-2-line" ng-click="openMenu($mdOpenMenu, $event)" ng-repeat="prop in properties">
<div class="md-list-item-text">
<h3>{{ prop['display_name'] }}</h3>
<p>{{ object[prop.key] }}</p>
</div>
</md-list-item>
<md-menu-content width="6">
<md-menu-item ng-repeat="val in prop['values']">
<md-button ng-click="updateAttribute(prop.key, val)">
{{val}}
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list>
However, I don't really see what I am doing wrong. I also keep getting the following errors, of which I do not know the meaning:
angular.js:13550 TypeError: Cannot read property 'hasAttribute' of undefined
at r (http://localhost/flatt.io/app/node_modules/angular-material/angular-material.min.js:13:26527)
and
angular.js:13550 TypeError: Cannot read property '0' of undefined
at enableHoverListener (angular-material.min.js:13)
Regards
Your ng-repeat where prop is defined is on the md-list-item tag. prop falls out of scope when that tag is closed, so it's not available when you go to define your md-menu-content.
Related
I am having trouble with passing the results of checkboxes from my view to the controller and just get "undefined" in the console log.
FYI - I have my controller as "camp".
In my view I have the following:
<div style="padding:20px;">
<h5>Add a Business</h5>
<md-content style="padding:20px;">
<md-checkbox
ng-repeat="business in camp.businesses"
ng-model="business.selected"
aria-label="Checkbox"
>
{{business.business_name}}
</md-checkbox>
</md-content>
<md-button class="md-raised" ng-click="camp.addBusinesses(business)">
<i class="fa fa-plus"></i> Add
</md-button>
</div>
In my controller I have the following function in an "angular.extend()"
addBusinesses: function(val){
console.log('Display Results: ', val);
}
If I just use the function to log the click event, it's fine. But when I try to pass the "business" object, it says "undefined".
What am I missing here???
The issue is your <md-button> is outside the ng-repeat. Your ng-repeat ends with the </md-checkbox> so when it gets to the button, business is indeed undefined.
Try reformatting your code so that the button is still within the scope of the ng-repeat. Maybe you want the repeat on the md-content instead? I'm not sure what the page is supposed to look like so I can't advise more than that.
I am unable to access special properties of ngRepeat in md-virtual-repeat. I would like access $last property for the md-divider. However this always returns null.
As stated at https://material.angularjs.org/latest/api/directive/mdVirtualRepeat,
Virtual repeat is a limited substitute for ng-repeat
actually it supports only $index.
In case when md-on-demand directive is used you can use getLength() function as #Ashish already said:
<md-virtual-repeat-container id="vertical-container">
<div md-virtual-repeat="item in ctrl.dynamicItems"
md-on-demand
class="repeated-item"
flex>
{{item}}
<md-divider ng-if="$index !== ctrl.dynamicItems.getLength() - 1"></md-divider>
</div>
</md-virtual-repeat-container>
if you do not want to use md-on-demand directive, then you can use items.length:
<md-virtual-repeat-container id="vertical-container2">
<div md-virtual-repeat="i in ctrl.items" class="repeated-item" flex>
Hello {{i}}!
<md-divider ng-if="$index !== (ctrl.items.length - 1)"></md-divider>
</div>
</md-virtual-repeat-container>
here is modified official codepan: http://codepen.io/anon/pen/qRaoJK
I've got a couple of layout issues with an Angular Material app. I'm quite new to AngularJS so hopefully it's just something obvious.
The first and most annoying is that I'm struggling with getting an Angular Material list looking as I'd like it to.
<md-content layout-padding>
<section>
<md-list ng-cloak>
<md-list-item class="md-3-line" ng-repeat="item in items | filter:filtered" go-click="item/{{item.id}}">
<md-icon class="material-icons">{{ item.acknowledgedBy ? 'assignment' : 'assessment'}}</md-icon>
<div class="md-list-item-text" layout="column" style="overflow: hidden; text-overflow: ellipsis;">
<h3>{{item.id}} - blah blah </h3>
<h4>2016-01-01 15:23:45</h4>
<h4>{{ item.description }}</h4>
</div>
<md-checkbox class="md-secondary" aria-label="Select {{item.id}}" ng-checked="selected.indexOf(item) > -1" ng-click="toggleSelection(item)"></md-checkbox>
</md-list-item>
</md-list>
</section>
</md-content>
The above worked as I expected until I added the checkbox to the list item. However this seems to prevent the text for the description being truncated with an ellipsis. Some of these descriptions can be large and I only want to show a lines worth, the primary action will show the info in full.
There is a plunker at https://plnkr.co/edit/thktG7C63cZv0FhqCzOD
My other niggle, on the same page is I'd like the both title bars to remain at the top of the page, the main app title and menu at the top and view specific title and menu options underneath. Currently the page specific one scolls up off the view.
Answer to your 2nd question.
Use md-content as the parent element since it will provide a scrollbar if needed.Now inside md-content whatever you place outside the 2nd md-content will not be scrollable and will work as a static header.
Here is a full code for that. I use simple ng-repeat and md-button to set more content and set header. You may use it as you like.
<md-content layout='column' layout-fill style='background-color:white'>
<md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">
<div class="md-toolbar-tools">
<md-menu>
<md-button aria-label="Menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
M
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button go-click="/">
Home
</md-button>
</md-menu-item>
<md-menu-item>
<md-button go-click="/items">
Items (12)
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<h2>Mobile App</h2>
<span flex></span>
<md-button ng-click="page='report';option='option'">
Report Problem
</md-button>
<md-button ng-click="page='unread';option='unread option'">
Unread Messages
</md-button>
</div>
</md-toolbar>
<div layout='row'>
<span>
Current Page -> {{page}}
</span>
<span flex></span>
<span>
Options - {{option}}
</span>
</div>
<md-content flex layout='column' style='background-color:yellow'>
<md-button ng-repeat="item in [1,2,3,4,5,6,7,8,9,0]"> {{item}}</md-button>
<md-button ng-repeat="item in [1,2,3,4,5,6,7,8,9,0]"> {{item}}</md-button>
</md-content>
Here is a Working Example. http://codepen.io/next1/pen/yJyOvP
There are a few issues:
1. When screen is smaller than the line width of item.description things gets pushed out of the screen
This this caused by white-space: nowrap; on the <h4> tag. You can fix the layout by overriding it using white-space: normal;.
md-list-item.md-2-line .md-list-item-text h4, md-list-item.md-2-line > ._md-no-style .md-list-item-text h4, md-list-item.md-3-line .md-list-item-text h4, md-list-item.md-3-line > ._md-no-style .md-list-item-text h4 {
white-space: normal;
}
(I would actually use a <div> and give this a style instead of using <h4> tags because you get this kind of issues with most CSS frameworks.)
2. But now the text will wrap to the next line
I think it will be much easier to use the limitTo angular filter to do this with JavaScript than CSS. Set the value to something like 100, so it will show 100 characters of the string and hide the rest. Here's the original question: Limit the length of a string with AngularJS.
{{ "My String Is Too Long" | limitTo: 9 }} // outputs "My String"
3. Show both title bars
I think this is not possible unless you hack the Angular Material framework.
The expected behaviour of md-menu is that we do the following:
<md-menu>
<button ng-click="$mdOpenMenu()">Filters</button>
<md-menu-content>
<md-menu-item ng-repeat="field in devices.fieldList"><md-button ng-click="devices.setFilter(field)" ng-bind="field.name"></md-button></md-menu-item>
</md-menu-content>
</md-menu>
However I have a situation when using md-menu-bar that I want a quick access button to refresh some data, this causes an error Invalid HTML for md-menu: Expected two children elements. Although I could perhaps look at a different UI it feels like you should be able to have the following functionality wise it works great:
Snippet
<md-menu-bar>
<md-menu>
<button ng-click="$mdOpenMenu()">Filters</button>
<md-menu-content>
<md-menu-item ng-repeat="field in devices.fieldList"><md-button ng-click="devices.setFilter(field)" ng-bind="field.name"></md-button></md-menu-item>
</md-menu-content>
</md-menu>
<md-menu>
<button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></button>
</md-menu>
</md-menu-bar>
Is there any reason this should not be done?
Every md-menu must specify exactly two child elements
https://material.angularjs.org/latest/api/directive/mdMenu
If you see your code, missing the second part of md-menu.
<md-menu>
<button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></button>
</md-menu>
The second element is the md-menu-content element which represents the contents of the menu when it is open. Typically this will contain md-menu-items, but you can do custom content as well.
note: If you need a list of elements, try md-list:
<md-list>
<md-list-item>
<md-menu>
<button ng-click="$mdOpenMenu()">Filters</button>
<md-menu-content>
<md-menu-item ng-repeat="field in devices.fieldList"><md-button ng-click="devices.setFilter(field)" ng-bind="field.name"></md-button></md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
<md-list-item>
<button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></button>
</md-list-item>
</md-list>
for quick access button to refresh you can use it
<md-button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></md-button>
check this link
if md-menu don't have children, use hide in md-menu-content to resolve the error
Home
<md-menu-content hide></md-menu-content>
</md-menu>
I am trying to generate a dialogue when an icon is clicked. I get the following error when I click on the md-icon. The dialogue opens, but I see the following error on my console:
TypeError: Cannot read property 'getBoundingClientRect' of undefined
at transformToClickElement (angular-material.js:4652)
at dialogPopIn (angular-material.js:4630)
at Object.onShow (angular-material.js:4538)
at InterimElementFactory.self.show.compilePromise.then.showDone (angular-material.js:1827)
at processQueue (angular.js:13248)
at angular.js:13264
at Scope.$get.Scope.$eval (angular.js:14466)
at Scope.$get.Scope.$digest (angular.js:14282)
at Scope.$get.Scope.$apply (angular.js:14571)
at done (angular.js:9698)
angular-material.js:824 Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
Below is my HTML snippet.
<md-button class="md-fab md-primary" ng-click="showAdvanced($event)"
aria-label="AddClient">
<md-icon md-svg-src="content/images/68448.svg"
style="width: 48px; height: 48px;">
</md-icon>
<md-tooltip md-visible="demo.showTooltip">
Add Client
</md-tooltip>
</md-button>
Controller of the HTML page is below.
$scope.showAdvanced = function(ev) {
$mdDialog.show({
controller: 'newClient',
templateUrl: 'app/views/xyz/newClient.html',
targetEvent: ev
});};
Dialog HTML
<md-content class="md-padding" layout="row" layout-sm="column" style="font-size:1.2em">
<form name="myForm" >
<div layout layout-sm="column">
<md-input-container style="width:80%">
<label>Name</label>
<input ng-model="create.Name">
</md-input-container>
</div>
</md-content>
Thanks
You are missing a wrapping md-dialog tag. According to the docs:
The dialog's template must have an outer md-dialog element. Inside, use an md-content element for the dialog's content, and use an element with class md-actions for the dialog's actions.
Try this:
<md-dialog>
<md-content>
<md-button class="md-fab md-primary" ng-click="showAdvanced($event)" aria-label="AddClient">
<md-icon md-svg-src="content/images/68448.svg" style="width: 48px; height: 48px;"></md-icon>
<md-tooltip md-visible="demo.showTooltip">
Add Client
</md-tooltip>
</md-button>
</md-content>
</md-dialog>