How do I make one button as default in angular? - angularjs

I have some group of buttons in angular material code, so I want to make the first button as default, where it shows the content of that button on right side.
I have written some code like below, it shows the result after I clicked the button.
<div layout="row" layout-align="space-between">
<div class="list" style="width:30%;height:50px">
<div layout="column" ng-repeat="lists in vm.result | filter:searchText">
<div layout="row" layout-align="space-around">
<md-button class="md-raised" ng-click="vm.showItems(lists._id)">{{lists.wName}}'s Wish List {{$index}}</md-button>
<a style="margin-top:14px; cursor:pointer">{{lists.wType}}</a>
</div>
</div>
</div>
<div class="listItems" style="width:68%;height:400px;">
<div flex-xs flex-gt-xs="30" layout="row" ng-show="vm.showOnClick">
<md-card ng-repeat="product in vm.result" flex="30" style="max-width: 50%;">
<md-card-title>
<md-card-title-text>
<span class="md-subhead">{{product.Product_Name}}</span>
</md-card-title-text>
</md-card-title>
<md-card-title-media style="margin-left: -80px;">
<img ng-src="{{ product.Image }}" class="md-card-image" alt="Image here">
</md-card-title-media>
<md-card-title-text>
<span><span class="md-subhead" style="font-weight: bold; padding:2px;">Price: </span> {{ product.Price }}</span><br/>
<span><span class="md-subhead" style="font-weight: bold; padding:2px;">Brand:</span> {{ product.Brand }}</span><br/>
<span><span class="md-subhead" style="font-weight: bold; padding:2px;">Category: </span> {{ product.Category }}</span><br/>
</md-card-title-text>
</md-card>
</div>
</div>

What you are trying to achieve is to have the first item selected as default when your page is displayed. To do this, your controller should run the showItems method for the first item in the list once they have loaded.
I don't know what your controller or service looks like, but it would be something like (in your controller)
itemsService.loadItems().then(function(items) {
showItems(items[0]);
});

Related

How do I make the card title heights the same when content is different

I've run into this before and just forced it to work with a bunch of custom css but that seems sloppy. This seems completely backwards to how I would expect it to work. The content should flex to match the height, not the header. Any ideas on how to fix this besides custom css? Is there an "angular-material" way to fix it?
<div layout-gt-sm="row" flex="1">
<md-card ng-show="!trackingStored.loading" flex="20">
<md-card-title>
<md-card-title-text layout-align="center center">
<span class="md-headline"> General </span>
</md-card-title-text>
</md-card-title>
<md-divider style="width:100%;"></md-divider>
<md-card-content layout="column" layout-align="center center" flex = "1">
<dl>
<dt ng-show="trackingStored.VehicleStatus">Status</dt>
<dd ng-show="trackingStored.VehicleStatus">{{trackingStored.trackingInfo.VehicleStatus}}</dd>
<dt>Location</dt>
<dd>{{trackingStored.trackingInfo.ConfirmationNumber}}</dd>
<dt>Year</dt>
<dd>{{trackingStored.trackingInfo.VehicleYear}}</dd>
<dt>Make</dt>
<dd>{{trackingStored.trackingInfo.VehicleMake}}</dd>
<dt>Model</dt>
<dd>{{trackingStored.trackingInfo.VehicleModel}}</dd>
<dt>VIN</dt>
<dd>{{trackingStored.trackingInfo.VehicleVIN}}</dd>
<dt ng-show="trackingStored.trackingInfo.DropOffDate.HasValue">Dropped off</dt>
<dd ng-show="trackingStored.trackingInfo.DropOffDate.HasValue">{{trackingStored.trackingInfo.DropOffDate.Value}}</dd>
</dl>
</md-card-content>
</md-card>
<md-card ng-show="trackingStored.trackingInfo.RecentHistory != null && trackingStored.trackingInfo.RecentHistory.length > 0"
flex="80">
<md-card-title >
<md-card-title-text layout-align="center center">
<span class="md-headline"> Maintenance History </span>
</md-card-title-text>
</md-card-title>
<md-divider style="width:100%;"></md-divider>
<md-card-content>
<h4>(12 most recent entries)</h4>
<div layout-gt-xs="row" layout-wrap layout-align="space-between center">
<div ng-repeat="item in trackingStored.trackingInfo.RecentHistory track by $index" flex="50" flex-xs="100" style="width:100%;">
<md-card>
<md-card-title class="customCardHeader">
<md-card-title-text>
<span class="md-headline customCardHeaderText"> {{item.CompletedDate | date: trackingStored.dateFormat}} </span>
</md-card-title-text>
</md-card-title>
<md-divider> </md-divider>
<md-card-content>
<div>{{item.Comments}}</div>
</md-card-content>
</md-card>
</div>
</div>
</md-card-content>
</md-card>

preventing ng-click event with angular-material

I have a series of toggles inside a custom angular dropdown(s). The problem I am having is, the toggles do toggle, but they close the dropdown as well. How can I prevent this? The dropdowns should still close when double clicking the drawer, that is the expected behavior, but not when the toggle is clicked.
This is the HTML:
<div class="cnt" ng-repeat="item in data">
<div class="menu-item" ng-click="toggle(item.pos);">
<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> {{item.name}}</span>
<i class="fa fa-chevron-down" ng-class="{'rotate180': item.pos==menuIsOpen, 'rotate-back': !menuIsOpen}"></i>
</md-list>
<div class="sub-menu" ng-animate="'animate'" >
<div ng-repeat='(k,v) in item track by $index'>
<div ng-if="isArray(v)">
<md-menu-item ng-if="menuIsOpen===item.pos" ng-repeat='v1 in v track by $index'>
<md-button>
<div layout="row" flex="">
<md-switch class="md-primary" name="special" ng-model="project.special" required>
<span class="">
<p flex="">{{v1.title}}</p>
</span>
</md-switch>
</div>
</md-button>
</md-menu-item>
</div>
</div>
</div>
</div>
</div>
and the controller has this in it for functionality purposes and data population from json :
$scope.toggle = function(itemPos) {
if ($scope.menuIsOpen === itemPos) {
$scope.menuIsOpen = 0;
}
else {
$scope.menuIsOpen = itemPos;
}
}
$scope.isArray = function(val) {
return Array.isArray(val);
}
spoiler alert:adding md-prevent-menu-close="true" to the md-button didn't help
Here is a CODEPEN to try things out
Thanks guys
You should move your ng-click="toggle(item.pos);" into the <md-list>
<div class="cnt" ng-repeat="item in data">
<div class="menu-item">
<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex ng-click="toggle(item.pos);">
<span class="title flex" flex=""> {{item.name}}</span>
<i class="fa fa-chevron-down" ng-class="{'rotate180': item.pos==menuIsOpen, 'rotate-back': !menuIsOpen}"></i>
</md-list>
<div class="sub-menu" ng-animate="'animate'" >
<div ng-repeat='(k,v) in item track by $index'>
<div ng-if="isArray(v)">
<md-menu-item ng-if="menuIsOpen===item.pos" ng-repeat='v1 in v track by $index'>
<md-button>
<div layout="row" flex="">
<md-switch class="md-primary" name="special" ng-model="project.special" required>
<span class="">
<p flex="">{{v1.title}}</p>
</span>
</md-switch>
</div>
</md-button>
</md-menu-item>
</div>
</div>
</div>
</div>
</div>

How to use ng-show and ng-hide in ng-repeat loop

Here i have the code:
<ul dnd-list="list" ng-controller="Modalcontrol">
<li ng-repeat="item in list" ng-click="showAdvanced($event)">
{{item.card_name}}
</li>
</ul>
<span ng-click="$parent.selectedIndex=$index">Add </span>
<md-card class="card" ng-show="$parent.selectedIndex == $index" >
<form name="colorForm" class="addcontdrag" >
<md-input-container>
<label>Add text</label>
</md-input-container>
<span>
<md-button class="md-raised md-primary">Save</md-button>
<i class="material-icons" ng-click="$parent.selectedIndex=$index">clear</i>
</span>
</form>
</md-card>
In this code i want to hide the md-card when i click the close button. Show the md-card by using $parent.selectedIndex=$index. But i dont know how to hide the md-card using this one.
If anyone know please help me.
Thanks Advanced...
You will have to place your md-card inside li tag to get the $index.
<ul dnd-list="list" ng-controller="Modalcontrol">
<li ng-repeat="item in list" ng-click="showAdvanced($event)">
{{item.card_name}}
<span ng-click="$parent.selectedIndex=$index">Add </span>
<md-card class="card" ng-show="$parent.selectedIndex == $index" >
<form name="colorForm" class="addcontdrag" >
<md-input-container>
<label>Add text</label>
</md-input-container>
<span>
<md-button class="md-raised md-primary">Save</md-button>
<i class="material-icons" ng-click="$parent.selectedIndex=$index">clear</i>
</span>
</form>
</md-card>
</li>
</ul>

change variable only for one ng-repeat document angularjs

I'm trying to show more text when an user clicks a read more button:
<md-content class="md-padding" layout-xs="column" layout="row" layout-wrap>
<div flex-xs flex-gt-xs="50" layout="column" ng-repeat="paquete in paquetes">
<md-card>
<md-card-title layout="row" layout-xs="column">
<md-card-title-media layout-margin>
<img ng-src="{{paquete.img}}" class="md-card-image margin-auto" alt="image caption">
</md-card-title-media>
<md-card-title-text>
<span class="md-headline blue">{{paquete.title}}</span>
<span class="md-subhead dark-blue">{{paquete.desc | limitTo: limit.limit}}
<span class="threedots" ng-show="mas.mas">... </span>
<span style="cursor: pointer;" class="blue underlined"
ng-click="limitFunction(paquete.desc)">Leer
<span class="mas" ng-show="mas.mas">más</span>
<span class="menos" ng-show="menos.menos">menos</span>.
</span>
</span>
</md-card-title-text>
</md-card-title>
</md-card>
</div>
</md-content>
I'm limiting the initial descripction {{paquete.desc | limitTo: limit.limit}} and letting the user click to read more ng-click="limitFunction(paquete.desc)"
My controller:
$scope.limit = {limit: 200};
$scope.limitFunction = function (desc) {
$scope.limit.limit = desc.length;
};
But when I click on one of the ng-repeat elements, the $scope.limit changes to all of them instead of the one I'm clicking.
How do I change the $scope.limit to only the one that I'm clicking?
You could put the limit on the paquete object and pass that into your limit function
<span class="md-subhead dark-blue">{{paquete.desc | limitTo: paquete.limit}}<span class="threedots" ng-show="mas.mas">... </span><span style="cursor: pointer;" class="blue underlined" ng-click="limitFunction(paquete)">Leer <span class="mas" ng-show="mas.mas">más</span><span class="menos" ng-show="menos.menos">menos</span>.</span></span>
In the controller:
$scope.limitFunction = function (paquete) {
paquete.limit = paquete.desc.length;
};

md-menu inside md-list-item as a second action button

I have got the code below in my project and I have got this problem. When I will add the md-menu component into my dynamically generated (ng-repeat) md-list component, it will show this error in JS console:
Error: Invalid HTML for md-menu: Expected two children elements.
My HTML code:
<md-card>
<md-card-content>
<h2>Menu</h2>
<md-subheader class="md-no-sticky">List</md-subheader>
<md-list-item ng-repeat="playlist in playlists" ng-click="someAction()">
<p>{{playlist[1]}}</p>
<md-menu>
<md-icon aria-label="Action" ng-click="$mdOpenMenu($event)" class="md-secondary md-hue-3 material-icons">create</md-icon>
<md-menu-content>
<md-menu-item><md-button ng-click="">Edit</md-button></md-menu-item>
<md-menu-item><md-button ng-click="">Remove</md-button></md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-card-content>
</md-card>
Can you help me to solve this issue please?
I think, that the problem is when the code is builded, it looks different and then md-menu component has got 2 child inside (2 button), but I don't know, how to resolve this.
Here is the builded code:
<md-list-item class="md-with-secondary ng-scope md-clickable" tabindex="-1" role="listitem" ng-repeat="playlist in playlists">
<button tabindex="0" ng-click="someAction()" class="md-no-style md-button md-ink-ripple" ng-transclude="">
<div class="md-list-item-inner ng-scope">
<p class="ng-binding">test</p>
<md-menu class="md-menu ng-scope">
<md-menu-content>
<md-menu-item role="menuitem">
<button tabindex="0" type="button" ng-click="" class="md-button md-ink-ripple" ng-transclude="">
<span class="ng-scope">Edit</span>
</button>
</md-menu-item>
<md-menu-item role="menuitem">
<button tabindex="0" ng-click="" class="md-button md-ink-ripple" ng-transclude="">
<span class="ng-scope">Remove</span>
</button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
<div style="" class="md-ripple-container"></div>
<div style="" class="md-ripple-container"></div>
</button>
<button tabindex="0" ng-click="$mdOpenMenu($event)" class="md-secondary-container md-icon-button md-button md-ink-ripple" ng-transclude="">
<md-icon tabindex="-1" aria-label="Open Chat" class="md-hue-3 material-icons ng-scope ng-isolate-scope">create</md-icon>
</button>
</md-list-item>
I also couldn't use md-menu inside md-list-item as a second action button when I was using Angular Material 1.0.0 RC1 but when I upgraded both js and css of Angular Material to 1.1.0 RC4 it worked. The working code is something like this and please notice the "md-secondary" class needs to be assigned to "md-menu":
<md-list flex>
<md-subheader class="md-no-sticky">sub header</md-subheader>
<md-list-item ng-click="goToPerson(person.name, $event)" class="md-2-line" ng-repeat="user in userManagement.users">
<img alt="{{ 'person.name' }}" ng-src="https://pixabay.com/static/uploads/photo/2014/03/25/16/54/user-297566_960_720.png" class="md-avatar"/>
<div class="md-list-item-text">
<h3>{{ user.firstName }} {{ user.lastName }} </h3>
<p>{{ user.email }} </p>
</div>
<md-menu md-position-mode="target-right target" class="md-secondary">
<md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
<md-icon md-menu-origin>menu</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item ng-repeat="item in [1, 2, 3]">
<md-button ng-click="ctrl.announceClick($index)">
<div layout="row" flex>
<p flex>Option {{item}}</p>
<md-icon md-menu-align-target md-svg-icon="call:portable-wifi-off" style="margin: auto 3px auto 0;"></md-icon>
</div>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
Every md-menu must specify exactly two child elements. The first
element is what is left in the DOM and is used to open the menu. This
element is called the trigger element.
https://material.angularjs.org/latest/api/directive/mdMenu
I think your ng-click="$mdOpenMenu($event)" needs to be on a md-button element, not the md-icon
go to source code of angular-material.js and add/modify that part... I will generate menu as secondary-item outside the item.
// Check for a secondary item and move it outside
if ( secondaryItem && (
isMdMenu(secondaryItem) ||
secondaryItem.hasAttribute('ng-click') ||
( tAttrs.ngClick &&
isProxiedElement(secondaryItem) )
)) {
tEl.addClass('md-with-secondary');
tEl.append(secondaryItem);
}
function isMdMenu(el) {
var nodeName = el.nodeName.toUpperCase();
return nodeName == "MD-MENU";
}

Resources