Angular Material switch between show and hide programmatically - javascript

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;
}

Related

AngularJS, Angular-Material - HTML Not rendering despite object present on $scope

I have searched extensively for a solution to this problem and can't seem to find one. Any help here would be greatly appreciated.
The Basics:
Utilizing angular-material tabs
Upon selection of an item from a dropdown, a call is made to a firebase database and returns a response, which is put into an array on the $scope.
HTML is utilizing ng-repeat on this response object.
The Problem:
Despite the response object being present on the scope, the html does not render anything until the user "clicks" another button on the view - any button at all. In fact, the user has to simply touch/click something on the screen and then the results render.
If user makes a call to the database to get artists in a certain medium (i.e. painting), but does not click anything on the screen, no results will show at all, despite response object being present in $scope.
I am stumped.
HTML:
<md-tabs md-dynamic-height md-border-bottom md-center-tabs><md-tab label="Artists">
<md-content id="tab_background" class="md-padding">
<div class="query_results hide_link" layout-padding>
<a ng-repeat="artist in results | filter: searchText"
href="/#/artist/{{artist.selectedMedium}}/{{artist.uid}}">
<md-card>
<img ng-src="{{artist.profImg}}" class="md-card-image" alt="Washed Out">
<md-card-header>
<div id="card_play_button_included">
<md-card-header-text>
<span class="hide_link md-title">{{artist.name}}{{artist.name_last}}</span>
<span class="hide_link md-subhead">{{artist.selectedSubmedium[0]}}</span>
<span class="hide_link md-caption">{{artist.neighborhood}}</span>
</md-card-header-text>
</div>
</md-card-header>
<md-card-actions layout="row" layout-align="end center">
</md-card-actions>
</md-card>
</a>
</div>
</md-content>
</md-tab>
<md-tab label="Events">
</md-tab>
</md-tabs>
Javascript:
$scope.getArtists = function(medium){
//resetting results array
$scope.firstArray = [];
$scope.results = [];
var Medium = medium.name;
firebase.database().ref('/Artists/' + Medium).once('value').then(function(snapshot){
console.log(snapshot.val());
var obj = snapshot.val();
for (var key in obj) {
var innerObj = obj[key]
innerObj.uid = key;
console.log(innerObj);
$scope.firstArray.push(innerObj);
}
$scope.results = $scope.firstArray;
$scope.runSpinner();
})
}
I used $scope.apply() and it solved it.

$anchorScroll after div is created

I've got a problem using $anchorScroll. I've got a div with an ng-ig condition that isn't visible at the beginning. I need use the $anchorScroll function to go in that div when a button is clicked. This button also make the div visible. Right now doesn't work because i think it fires the $anchorScroll before the div is created. This is the code:
<body ng-app="testApp" data-ng-controller="searchController as searchCtrl" >
<div id="scrollArea">
<form>
//HTML input elements
<div class="buttons">
<md-button class="md-primary md-raised" ng-click="searchCtrl.gotoTable('resultTable')">Start</md-button>
{{searchCtrl.test}}
</div>
</form>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!-- Smart Table for displaying result -->
<div id="resultTable" class="rtable">
<div ng-if="searchCtrl.test == true" >
//table content
</div>
</div>
</body>
and the angular part
var app = angular.module('testApp', []);
app.controller("searchController", function($scope, $location, $anchorScroll, $timeout){
var self = this;
self.test = false;
self.gotoTable = function(resultTable)
{
self.test = true;
self.anchor(resultTable);
};
self.anchor = function(resultTable) {
$location.hash('resultTable');
$anchorScroll();
} ;
});
Plunker: http://plnkr.co/edit/HrdN2ZACDui61l1kPHEj?p=preview
Thanks
After playing around with your plunker, I've found that updating angularJs for the latest version fixed the problem.
I don't know if you can update your angular version?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

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.

Using attributes as text in angular component

I have this little component:
.component('obsbox', {
restrict: 'E',
templateUrl: 'app/components/interactions/html/interactions.obsBox.partial.html',
controller: 'InteractionsController',
controllerAs: 'vm',
bindings: {}
});
All it does it produce a box with some text in it. Nothing spectacular. What I'd like to do is pass a few attributes into the tag and then display those attributes when it resolves.
<obsbox title1="Positive" title2="Experience" score="1"></obsbox>
That should give me a box with "1" in at the top and "Positive Experience" in the bottom. I haven't been able to find anything on SO or anywhere else that explains how I would do that in a way I can understand.
There's nothing in my controller or anywhere else that would be helpful to show you. My controllers are literally doing nothing at the moment.
Any advice?
Edit:
here's the html for the component:
<div layout="row" layout-align="start center" flex="11">
<div layout="column" layout-align="center center" flex="100">
<div layout="row" layout-align="center center" flex="100">
1
</div>
<div layout="row" layout-align="center center" flex="100">
<div layout="column" layout-align="center center" flex="100" style="font-size: x-small">
<div layout="row" layout-align="center center" flex="100">
POSITIVE
</div>
<div layout="row" layout-align="center center" flex="100">
ATTITUDE
</div>
</div>
</div>
</div>
</div>
In my ideal world "1", "Positive", and "Attitude" would come from from attributes on the obsbox tag.
Have you seen the example at https://docs.angularjs.org/guide/component ?
You should fill your bindings like this:
bindings: {
title1:"#",
title2="#",
score="#"
}
# denotes text binding. See the link above for more binding options.
You can then use {{ $ctrl.title1 }} and the other bindings in the template.
For an example, see https://plnkr.co/edit/Gv3TofiO0QyjAOkODjPv?p=info
You can load it into scope using a link function in your directive:
.component('obsbox', {
// the other directive parameters
link: (scope, element, attributes, controller) => {
controller.title1 = attributes.title1;
controller.title2 = attributes.title2;
}
});
The link function is executed once, upon directive compilation.
If you need to update the value, you need to add a watch to that attribute. Angular provides a way to observe attributes with the $observe function:
// in the link function body
attributes.$observe('title1', newValue => {
controller.title1 = newValue;
});
Note that this way, it's using plain strings, not Angular expressions. This means that if you want to have an expression, you would need the $parse service in the directive, or use interpolation at usage site.

Angularjs show hide css issue

I had a hard issue figuring out on how to hide and show icon/text with angular code. I am completely new to angular and tried hard on the below fiddle code. How do I hide + or minus icon with .closest in such dom scenarios.
<div ng-controller="MyCtrl">
{{name}}
<div data-toggle="collapse" aria-expanded="true" data-target="#list-item-line-0" id="expandCollapseChild" ng-click="addExpandCollapseChildIcon()">
<div>
<div>
<label>
<div>
<span class="icon-expand">-</span>
<span class="icon-collapse">+</span>
</div>
<div>
Click me to hide minus icon
</div>
</label>
</div>
</div>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.addExpandCollapseChildIcon = function() {
alert('');
if (angular.element('#expandCollapseChild').hasClass('collapsed')) {
angular.element(this).closest('.icon-collapse').css('display', 'none');
} else {
if (angular.element('#expandCollapseChild').hasClass('collapsed')) {
angular.element(this).closest('.icon-collapse').css('display', 'block');
}
}
}
In Angular, this is the wrong approach. You shouldn't actually show or hide elements inside the controller. That's applying a jQuery style (working directly on the DOM) to Angular.
In Angular, you'd use something like ng-if, ng-show or ng-class, all of which can link back to a property on the scope object that is accessible via the controller.
Here are some examples:
<div ng-if="myProp === 'ShowMe'">
<div ng-show="myProp === 'ShowMe'">
<div ng-class="{myCssClass: myProp === 'ShowMe'">
Inside your controller, you'd have something like this:
function MyCtrl($scope) {
$scope.myProp = 'ShowMe';
$scope.addExpandCollapseChildIcon = function(newPropValue) {
$scope.myProp = newPropValue;
}
}
Here's some links to documentation on ng-if, ng-show and ng-class:
https://docs.angularjs.org/api/ng/directive/ngIf
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngClass
AngularJS has a bunch of angulary ways of doing things, your question for example might look like this:
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.collapsed = true;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<span ng-bind="collapsed ? '+' : '-'"></span>
</div>
</div>
It watches a model and changes it's appearance based on that model using the ternary operator within ng-bind.
The way you defined your app and controller was incorrect. There's a bunch of different ways to do this as you can see from the answers.
I took this approach:
<div ng-app='myApp' ng-controller="MyCtrl">
{{name}}
<div>
<div>
<div>
<label>
<div>
<span ng-show='(collapsed != false)' class="icon-expand">-</span>
<span ng-show='(collapsed == false)' class="icon-collapse">+</span>
</div>
<div ng-click='collapsed = !collapsed'>
Click me to hide minus icon
</div>
</label>
</div>
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.name = 'Superhero';
$scope.collapsed = false;
});
</script>
Create a scoped variable that indicated whether or not it is collapsed . Then change that variable and the ng-shows will react.

Categories