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.
Related
I am trying to hide or show a button depending if a value is defined or undefined, but I am getting a missing attribute name in ng-show:
<md-list ng-cloak flex ng-repeat="(key, value) in $ctrl.questionWithCorrectAnswers | groupBy: 'QuestionID'">
<fieldset ng-class="{'notActiveQuestion': value[0].ActiveQ == 0}">
<legend>
<ng-show="value[0].ActiveQ"><md-button class="md-raised md-primary"><span ng-if="value[0].ActiveQ == 1">De</span>activate</md-button></ng-show>
</legend>
</fieldset>
ng-show is an attribute, it goes on an element.
WRONG:
<ng-show="value[0].ActiveQ">
RIGHT:
<div ng-show="value[0].ActiveQ">
Please have a look into angular documentation for ng-show.
We can use ng-show directive as element, but it also expect ng-show attribute as well.
https://docs.angularjs.org/api/ng/directive/ngShow.
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.
So I've got an list of names that I'm doing an ng-repeat on, and I've got an ng-click on each name, that when clicked, reveals a tooltip. I'm doing this like so:
<li ng-repeat="person in names" ng-click="tooltip = !tooltip">
<span>{{ person }}</span>
<div class="tooltip" ng-show="tooltip">This is {{ person }}'s tooltip</div>
</li>
When you click on a person 1's name their tooltip appears, but when you click on person 2, their tooltip also appears. I would like only one tooltip to appear at once. Is this possible using the toggle technique tooltip = !tooltip above?
I've set up a JS Bin of my issue, here: https://jsbin.com/faxoviwuze/1/edit?html,js,output
Any help is appreciated.
Thanks in advance!
Use the $index:
<ul ng-init="model.tooltip=-1">
<li ng-repeat="person in names" ng-click="model.tooltip = $index">
<span>{{ person }}</span>
<div class="tooltip" ng-show="model.tooltip==$index">This is {{ person }}'s tooltip</div>
</li>
</ul>
I recommend to not use scalar scope variables like tooltip.
It's easy to unbind. Use something like model.tooltip.
Simple fiddle
Also, there is not a reason for $scope injecting - you can to use controllerAs syntax.
JSBin
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>
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>