I'm using Angularjs with Angular Material and I have an <md-menu> that's opened when an <md-button> is clicked. I render the menu with an ng-repeat that looks like this:
<md-menu-item ng-repeat="item in orderItem.searchItems">
<md-button ng-click="orderItem.searchMenuHit($event, '{{item.field}}')">
{{item.caption}}
</md-button>
</md-menu-item>
If I right click on a menu item and inspect it with the debugger, it shows ng-click as orderItem.searchMenuHit($event,'STK_NUM') which is what I expect.
As shown in the image below:
When orderItem.searchMenuHit gets called it receives '{{item.field}}' as the value of its second parameter.
I'm not sure why this is, or how to address it. Obviously when the menu it actually rendered the item is rendered with the correct ng-click code, however; it seems when an item is clicked, the item is somehow re-rendered and the angular expression, even thought it's valid, is not evaluated.
So, I'm not sure if I'm doing something silly that made this more difficult than it should be or not, but for whatever reason, I could not get item.field to be properly passed as a parameter to my controller. I ended up passing the entire item object and that works fine.
My entire <md-menu> snippet now looks like this:
<md-menu>
<md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
<i class="material-icons md-dark">search</i>
</md-button>
<md-menu-content>
<md-menu-item ng-repeat="item in orderItem.searchItems">
<!--<md-button ng-click={{orderItem.getShortCutItem(item)}}>-->
<md-button ng-click="orderItem.searchMenuHit(item)">
{{item.caption}}
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
Related
I'm trying to use an ng-click function to get the data-target attribute of a clicked target angular material md-button, so that when a topic is clicked in the sidenav, the submenu for it appears.
I've structured the navigation using md-list with md-items as I've seen suggested, but can't figure out a way to get this behaviour, especially with the .sidenav-submenu elements not being direct children of the md-button that's clicked on.
Not sure this would even be the best approach for achieving something like this, but I'm limited by angular material's lack of toggled sidenav submenu directive.
HTML:
<md-item>
<md-button id="sidenav-paymentsButton" data-ng-click="toggleSubmenu($event)" data-target="#paymentsSubmenu">
<md-content class="sidenav-link" md-ink-ripple="#3a455f" layout="row" layout-align="space-between center">
<div layout="row" layout-align="start center"><span class="sidenav-link-icon material-icons">money_off</span>
Payments
</div>
<div><span class="expandSubmenu material-icons">keyboard_arrow_down</span></div>
</md-content>
</md-button>
<md-list id="paymentsSubmenu" class="sidenav-submenu">
<md-item>
<md-button ui-sref="newPayment">
<md-content class="sidenav-link" md-ink-ripple="#3a455f" layout="row" layout-align="start center">
<span class="sidenav-link-icon material-icons">create</span>
New Payment
</md-content>
</md-button>
</md-item>
navController JS:
app.controller('navController', function($scope, $state, $document) {
angular.element('.sidenav-submenu').hide();
$scope.toggleSubmenu = function($event) {
var target = $event.target;
// Not sure what to do next
}
})
You shouldn't be doing DOM manipulation in your controller. You use directives for DOM manipulation. That being said, what you want doesn't require any sort of custom directive that is not already built into angularjs.
Consider the following unstyled markup:
<div data-ng-click="nav.selected = 'A'">
Your toggle for the "A" side nav.
</div>
<div data-ng-click="nav.selected= 'B'">
Your toggle for the "B" side nav.
</div>
<div ng-if="nav.selected === 'A'>
The "A" side nav.
</div>
<div ng-if="nav.selected === 'B'>
The "B" side nav.
</div>
Used in conjunction with the following controller:
app.controller('navController', function($scope) {
$scope.nav = {
selected: 'A'
};
});
You technically don't even need the controller for this example if you change the markup slightly, but it will be helpful in getting around the "dot problem" in case it pops up when moving this to your own example.
I am attempting to filter a list of items the code below worded fine in angular js on the web but we can't expect Ionic to work now can we?
<ion-list *ngIf="items.length">
{{items[0].title}}
<ion-item ng-repeat="item in items | filter:searchLog">
{{item == undefined}}
<!--<ion-icon name="clipboard" item-left></ion-icon>
<h2><b>Title: {{item.title}}</b></h2>
<h3><b>Caller: {{item.caller.name}} - {{item.caller.number}}</b></h3>
<h3><b>Location: {{item.caller.location}}</b></h3>
<h3><i>Dispatcher: </i>{{item.dispatcher.name}} at {{item.timeStamp}}</h3>
<h3><b>Dropped: {{item.canceled}}</b></h3>
<h3 style="white-space: normal;"><i>Details:</i> {{item.details}}</h3>-->
</ion-item>
</ion-list>
This is what my screen shows:
car out of gas
true
For the life of me I cannot understand this because if I print {{ items[0].title }} it works fine in the repeat list meaning that it is not giving me this item object back from the ng-repeat call. What is even weirder is that *ngFor works but I cannot filter it :-( Please help
TL;DR: ng-repeat in angular is returning one undefined object.
Use *ngFor with pipe (i.e. filter). If it is still not working then there is some problem with your pipe (filter). Code should look like below:
<ion-list *ngIf="items.length">
{{items[0].title}}
<ion-item *ngFor="let item of items | searchLog">
<ion-icon name="clipboard" item-left></ion-icon>
<h2><b>Title: {{item.title}}</b></h2>
<h3><b>Caller: {{item.caller.name}} - {{item.caller.number}}</b></h3>
<h3><b>Location: {{item.caller.location}}</b></h3>
<h3><i>Dispatcher: </i>{{item.dispatcher.name}} at {{item.timeStamp}}</h3>
<h3><b>Dropped: {{item.canceled}}</b></h3>
<h3 style="white-space: normal;"><i>Details:</i> {{item.details}}</h3>
</ion-item>
</ion-list>
I am stuck at this issue i have a list of menu item
<md-menu-item ng-value="menuItem.value" ng-repeat="menuItem in filtermenu.menuItems" ng-click="activeFilterCtrl.selectedfilter(menuItem)" translate>
<md-button>
{{ menuItem.name }}
</md-button>
</md-menu-item>
Following is the code i want to display the value of selected menu item on a button or on a label which should be displayed after selection of menu item.
Please help me resolve the issue
In your code you call the selectedFilter(menuItem) function. You can then add this in your function:
$scope.selectedFilter = function(menuItem){
// your code here
$scope.myLabel = menuItem.name;
}
And in your HTML:
<md-button>
{{myLabel}}
</md-button>
Probably the md-button directive creates its own scope and therefore menuItem is not present at this scope. Try $parent.menuItem to access the parent scope which should be the scope of ng-repeat.
I have a md-select dropdown menu:
<md-select ng-model="selectedCategory">
<md-option ng-repeat="category in dropdown" value="{{category.ID}}">
{{category.prop}}
</md-option>
</md-select>
And i have a span like following. When i click on span with class fa, selectedCategory becomes 0 and the encapsulating span is closed (that is normal). BUT then, for some reason, selectedCategory takes again the previous value
<span ng-show="selectedCategory!=0">{{selectedCategory.prop}}
<span class="fa fa-times delete-filter" ng-click="selectedCategory=0;"></span>
</span>
Why does selectedCategory take previous value after 0? There is no other function influencing selectedCategory
ps: if i do the same in console (selectedCategory=0), it works.
ps2: if i do the same function in a function and call that from ng-click, it works clearly too.
I've got a few dynamic accordions which based on $resource like so:
$scope.categories = $resource.query() // Written as such for simplicity sake
Then in my template I've got the following:
<accordion-group ng-repeat="category in categories" is-open="$first">
<accordion-heading>
<button ng-show="IDontKnow">...</button>
...
</accordion-heading>
</accordion>
With the above, I get my first open by default which is what I want, however I'd like to display the button above only if the accordion is open. Because $first is special variable from ng-repeat I can't change it. I've tried to use isOpen like so:
<button ng-show="category.isOpen">...</button>
But that didn't work either. How can I achieve this? Please bear in mind the accordions are based on dynamic content.
Many thanks in advance.
please see here http://plnkr.co/edit/rv6esLxJuE6NLlxwhZkh?p=preview
you can use ng-init ie: ng-init="category.isOpen=$first"
HTML:
<accordion close-others="oneAtATime">
<accordion-group ng-repeat="category in categories" is-open="category.isOpen" ng-init="category.isOpen=$first">
<accordion-heading>
I can have markup, too!
<button ng-show="category.isOpen">I'm the button</button>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>