We Keep Coding

AngularJS UI Router: ui-sref not updating URL in address bar?

I'm building an AngularJS app and I'm using UI-Router in order to navigate through the app.
The flow of the web app consist in first registering or login, then it takes you to a main grid that has a lot of elements that are being displayed through ng-repeat and when you click in one of them it takes you to a dashboard that displays information of the element that has been clicked and it also successfully changes the path to index.html#!/dashboard/(here goes the name of the element)
This is the html 5 code of that main grid:
<div class="container">
<div class="row" ng-controller="ribtStateServicesController" >
<div class="col-md-3 ribt_HomeGrid" ng-repeat="estado in estados" >
<div class="img-ribt_overlay" >
<a ng-click="doWork(estado.idState)" ui-sref="dashboard({ribtNameState: estado.idState})">
<img src="{{estado.image}}" class="img-thumbnail">
<div class="ribt_overlay" ></div>
</a>
</div>
</div>
</div>
</div>
However, in that same dashboard I have a side menu, that has the same elements that were used in the main grid before. So I figured that it would take the same logic to be able to use the params that the UI-Router offer in order to change the URL and the content displayed. But it does nothing.
This is the code in the HTML of the dashboard's side menu:
<div class="col-md-6 nopadding" ng-repeat="estado in estados | filter:busqueda">
<md-card md-ink-ripple="#ffffff">
<img ng-src="{{estado.nolabel}}" class="md-card-image ribt_estado_side_img"
ui-sref="dashboard({ribtNameState: estado.idState})"
alt="Estado" ng-click="doWork(estado.idState); toggleLeft()">
<md-card-title class="nopadding">
<md-card-title-text>
<p class="ribt_card_estado_nombre">{{estado.nombre}}</p>
</md-card-title-text>
<md-menu>
<md-button class="md-icon-button float-right" aria-label="Share" ng-click="$mdMenu.open()">
<i class="material-icons">more_vert</i>
</md-button>
<md-menu-content width="4" ng-mouseleave="$mdMenu.close()">
<md-menu-item ng-repeat="item in [1, 2, 3]">
<md-button>
Option {{item}}
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-title>
</md-card>
</div>
Heres is the code in my app config:
ribtApp.config(function ($stateProvider,$mdThemingProvider,$locationProvider) {
$stateProvider
.state('login', {
url: '',
templateUrl: 'ribtComponents/ribtLogin/ribtLogin.html',
controller: 'ribtLoginController'
})
.state('home', {
url: '/home',
templateUrl: 'ribtComponents/ribtHome/ribtHome.html',
controller: 'ribtStateServicesController'
})
.state('dashboard', {
url: '/dashboard/{ribtNameState}',
templateUrl: 'ribtComponents/ribtDashboard/ribtDashboard.html',
controller: 'ribtStateServicesController',
resolve:{
ribtNameState: ['$stateParams', function($stateParams){
return $stateParams.ribtNameState;
console.log($stateParams.ribtNameState)
}]
}
});
I tried a console log to see if the param was being changed and it is but it does nothing to the URL path. I've tried a lot of code that I've found in stackoverflow but none of them has worked. I would be deeply thankful if you could help me with this.

You need to switch your ng-hrefs to ui-srefs, which is what ui-router uses to set up links to change states. So something like...
<div class="col-md-6 nopadding" ng-repeat="estado in estados | filter:busqueda">
[...]
<a ng-click="doWork(estado.idState)" ng-href="index.html#!/dashboard/{{estado.idState}}">
should be something more like...
<div class="col-md-6 nopadding" ng-repeat="estado in estados | filter:busqueda">
[...]
<a ng-click="doWork(estado.idState)" ui-sref="dashboard({ribtNameState: estado.idOrWhatever})">
with the caveat that I don't know what doWork is actually doing, so I don't know if that is necessary.
If you need to transition in a controller, you can also inject $state and use $state.go(...), but most of the time ui-srefs can get it handled in my experience.

angular material - sidenav from the bottom?

Angular material sidenav seems to have a left/right options:
<md-sidenav class="md-sidenav-**right**">
<md-sidenav class="md-sidenav-**left**">
Although it is called a "side"-nav, is it possible to use it as a "bottom"-nav?
if so how can it be done?

there is no bottom-nav as you said, but you can do it using https://material.angularjs.org/latest/demo/bottomSheet
VIEW
<div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center" >
<md-button flex="50" class="md-primary md-raised" ng-click="showBottomSheet()">Show</md-button>
</div>
JS
$scope.showBottomSheet = function() {
$scope.alert = '';
$mdBottomSheet.show({
templateUrl: 'bottom-sheet-template.html',
controller: 'BottomSheetCtrl'
}).then(function(clickedItem) {
$scope.alert = clickedItem['name'] + ' clicked!';
});
};

angular material does not support bottom nav .. you have to achieve it manually.

I think that what you are trying to achieve can be done by overwriting angular material styles to suit your needs. Just add some custom class or id to <md-sidenav> element and apply your styles.

Angular Material switch between show and hide programmatically

Is it possible to switch between the attributes show and hide by button click (programmatically)? I have for example a card with a map and a list view.
These are usually displayed side by side. On mobile devices, but is for the List view flex = 100 increases. The map is no longer displayed. The user should however have the possibility to switch between the two views. How I can do that?
My example tags:
<md-card flex-gt-xs="40" flex-xs="100">
<list></list>
</md-card>
<md-button>toggle Views</md-button>
<md-card flex="60" hide-xs show-gt-xs >
<leaflet height="40vh" ></leaflet>
</md-card>
Update:
Summary
I would like to have 2 columns that can be switched on mobile devices, and side by side on larger devices.

I'm not 100% sure what you are asking but this CodePen demonstrates the basics of toggling programatically.
md-button has an ng-click attribute that calls the function toggle() which toggles the view value. view is passed to the ng-if of each card.
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" style="height:100%" layout="column">
<md-card flex-gt-xs="40" flex-xs="100" ng-if="view">
Card 1
<list></list>
</md-card>
<md-button ng-click="toggle()">toggle Views</md-button>
<md-card flex="60" hide-xs show-gt-xs ng-if="!view">
Card2
<leaflet height="40vh" ></leaflet>
</md-card>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])
.controller('AppCtrl', function($scope) {
$scope.view = true;
$scope.toggle = function () {
$scope.view = !$scope.view;
}
});
You can replace ng-if with ng-show if you need to retain information in elements that you are toggling as ng-if recreates the element each time it is true.

I have found the solution. $mdMedia does all the magic.
js:
$scope.$watch(function () {
return $mdMedia('sm');
}, function (big) {
$scope.screenIsSmall = $mdMedia('sm');
});
View:
<md-card flex="60" ng-hide="screenIsSmall&&!showMap" style="max-height: 40vh">
<md-button ng-show="screenIsSmall" ng-click="showMap = !showMap">toggle</md-button>
<leaflet height="40vh"></leaflet>
</md-card>

app.component.html
<div fxLayout="column" fxLayout.gt-sm="row wrap">
<div fxFlex="50" class="flex-p">
<mat-slide-toggle
[checked]="isSlideChecked"
(change)="toggleChanges($event)"
>Hide/Show - card</mat-slide-toggle
>
</div>
</div>
<mat-card *ngIf="isSlideChecked">Simple card</mat-card>
app.component.ts
isSlideChecked: boolean = false;
toggleChanges($event: MatSlideToggleChange) {
this.isSlideChecked = $event.checked;
}

How to get row data through angular material menu inside ag-grid

I've a requirement where in ag-grid, I need to open a menu to add/edit/delete that row data. I'm using angular material menu component as cell template url. but when click on that menu item, it does not trigger onCellClicked event in ag-grid to get reference to clicked row data however If I click pixels away from menu item then event is fired.
Need help to figure out, how can I get row data on menu click.
my ag-grid code goes here:
var columnDefs = [
{headerName: "", field: "icon", width:65},
{headerName: "Categories",field:"category_name", width:1025, cellRenderer:function(params){
// my cell renderer code goes here
},
onCellClicked:function(params){
console.log("Cell is still getting click "+params.data);
//This click does not work
},
{headerName: "", field: "options", width:87, suppressMenu: true, templateUrl:"partials/options.html"
}
];
options.html
<md-menu>
<!-- <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="openMenu($mdOpenMenu, $event)">
<md-icon md-svg-src="images/icons/options.svg" aria-label="android "></md-icon>
</md-button> -->
options
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="modifyOptions($event)">
<md-icon md-svg-src="images/icons/add.svg" aria-label="android "></md-icon>
Add
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="toggleNotifications()">
<md-icon md-svg-src="images/icons/edit.svg" aria-label="android "></md-icon>
Edit
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button disabled="disabled" ng-click="checkVoicemail()">
<md-icon md-svg-src="images/icons/delete.svg" aria-label="android "></md-icon>
Delete
</md-button>
</md-menu-item>
</md-menu-content>

I found the answer for my question which was not pretty hard though: Cell template has reference to data object for each row, so property can be accessed by calling data.your_property. Here I didn't need onCellClicked event at all. Below is working code:
var columnDefs = [
{headerName: "", field: "icon", width:65},
{headerName: "Categories",field:"category_name", width:1025, cellRenderer:function(params){
// Cell Renderer goes here
},
{headerName: "", field: "options", width:87, suppressMenu: true, templateUrl:"partials/options.html"
}
];
option.html
<md-menu>
options
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="modifyOptions($event, data)">
<md-icon md-svg-src="images/icons/add.svg" aria-label="android "></md-icon>
Add
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="modifyCategory(data)">
<md-icon md-svg-src="images/icons/edit.svg" aria-label="android "></md-icon>
Edit
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button disabled="disabled" ng-click="deleteCategory(data)">
<md-icon md-svg-src="images/icons/delete.svg" aria-label="android "></md-icon>
Delete
</md-button>
</md-menu-item>

Change index of AngularJS md-tabs have no effect at all

In my Angular app, I have a md-tabs whose md-selected directive is binded to a property in my controller. I'd like to change the current tab to the one whose index is set by a function called by ng-click somewhere else in my template.
I did it this way:
<div ng-controller="TrackingCtrl" layout-fill>
<md-content ng-if="isSmart" layout-fill>
<md-tabs md-selected="selectedIndex" layout-fill>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>
<md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
<md-tab-body>
<md-tab-content layout-fill flex>
<button ng-click="map.panTo(getPosition());displayMap();"></button>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
In my controller I have :
$scope.selectedIndex = 0;
$scope.displayMap = function() {
$scope.selectedIndex = 1;
};
But it has no effect at all when I click my button which calls displayMap();
I've inspected the problem:
When I set $scope.selectedIndex = 1; in my controller, the default tab is the one whose index is 1. OK
When I set md-selected="1" in my template, the default tab is the one whose index is 1. OK
When I set a breakpoint in my code, and when I click my button, displayMap() is called, and $scope.selectedIndex = 1; is executed. OK
It seems everything works fine... except the tab doesn't change.
I'm running Angular Material 1.0.2
I even used $apply to force update (no effect) :
$scope.selectedIndex = 0;
$scope.displayMap = function () {
$timeout(function () {
if (!$scope.$$phase) {
$scope.$apply(function () {
$scope.selectedIndex = 1;
});
}
});
};

I'm glad you've found a workaround for your issue. To avoid that behaviour initially, you should probably have a look at this stackoverflow discussion.
Since your selectedIndex variable holds a primitive, every new Scope introduced - you already mentioned the ngIf - destroys the data binding and changes within the child scope will not have effect on the 'outside'.
In your case, just use...
$scope.vm = {
selectedIndex: 0
};
...to follow the dot rule.

I solved my problem which was certainly caused by a scope issue. I simply used the controller as syntax, and declared every previous scope data with:
var self = this;
self.selectedIndex = 0;
self.displayMap = function (){
self.selectedIndex = 1;
};
and my markup:
<div ng-controller="TrackingCtrl as tracking" layout-fill>
<md-content ng-if="tracking.isSmart" layout-fill>
<md-tabs md-selected="tracking.selectedIndex" layout-fill>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>
<md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
<md-tab-body>
<md-tab-content layout-fill flex>
<button ng-click="tracking.displayMap();"></button>
</md-tab-content>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
Works perfect now. I guess my ng-if was modifying my scope or so.

Maybe I've misunderstood something about your question but this should work...
I've created a plunker and I cannot reproduce your behaviour, it's just working fine.
View:
<md-tabs class="md-accent" md-selected="selectedIndex">
<md-tab id="tab1">
<md-tab-label>Item One</md-tab-label>
<md-tab-body>
data.selectedIndex = 0;
</md-tab-body>
</md-tab>
<md-tab id="tab3">
<md-tab-label>Item Two</md-tab-label>
<md-tab-body>
data.selectedIndex = 1;
</md-tab-body>
</md-tab>
</md-tabs>
<md-button ng-click="displayMap()">Map</md-button>
Controller:
function AppCtrl ( $scope ) {
$scope.selectedIndex = 0;
$scope.displayMap = function() {
$scope.selectedIndex = 1;
};
Could you please check it? Hope it helps
Plunker here

here is my solution:
<div layout="column" flex>
<md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedIndex">
<md-tab label="Genel" md-on-select="vm.selectedIndex = 0">
<div class="md-padding">{{vm.selectedIndex}}</div>
</md-tab>
<md-tab label="Sipariş / Planlama" md-on-select="vm.selectedIndex = 1">
<div class="md-padding">{{vm.selectedIndex}}</div>
</md-tab>
<md-tab label="Kalite Kontrol Oranları" md-on-select="vm.selectedIndex = 2">
<div class="md-padding">{{vm.selectedIndex}}</div>
</md-tab>
<md-tab label="E-Posta" md-on-select="vm.selectedIndex = 3">
<div class="md-padding">{{vm.selectedIndex}}</div>
</md-tab>
</md-tabs>
</div>

With md-selected = 0 you go to the first tab. And md-selected = 1 to the second tab.
button:
<md-button ng-click="displayMap()">Map</md-button>
controller:
$scope.displayMap = function() {
$scope.selectedIndex = 1; //select second tab
};