I make a short app, using Angular Material. I have an array of md-buttons, each with different caption. How to get what buttons was clicked or how do I get the caption of the button when is clicked ?
Here you go - CodePen
Markup
<div ng-controller="AppCtrl as ctrl" ng-cloak="" ng-app="MyApp">
<div layout="column" layout-align="start start">
<md-button ng-repeat="button in ctrl.buttons"
class="md-raised md-primary"
ng-click="ctrl.click($index)">{{button}}</md-button>
Button caption: {{ctrl.selectedButton}}
</div>
</div>
JS
angular.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function() {
this.buttons = ["Car", "Train", "Plane", "Rocket"];
this.click = function (index) {
this.selectedButton = this.buttons[index];
}
});
Related
I am using Angular Material's sidenav. I have opened the sidenav dynamically. The panel is appearing with a backdrop. User can click on the backdrop to close the sidenav. What I need is to disable closing of sidenav on clicking of backdrop. Can you help me with this?
Here you go - CodePen
The trick is to access the backdrop element and disable pointer events on it.
Markup
<div ng-controller="AppCtrl" layout="column" style="height:500px;" ng-cloak="" class="sidenavdemoBasicUsage" ng-app="MyApp">
<section id="section" layout="row" flex="">
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<div>
<md-button ng-click="toggleRight()" ng-hide="isOpenRight($event)" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
<md-content ng-controller="RightCtrl" layout-padding="">
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>
</md-sidenav>
</section>
</div>
JS
angular
.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function ($scope, $timeout, $mdSidenav, $log, $element) {
var section,
backdrop;
$scope.toggleRight = function() {
$mdSidenav('right')
.toggle()
.then(function () {
$log.debug("toggle right is done");
// Disable pointer events on backdrop
section = angular.element($element[0].querySelector('#section'));
backdrop = section[0].children[0];
backdrop.style.pointerEvents = 'none';
});
}
})
.controller('RightCtrl', function ($scope, $timeout, $mdSidenav, $log) {
$scope.close = function () {
$mdSidenav('right').close()
.then(function () {
$log.debug("close RIGHT is done");
});
};
});
I'm working on a simple application that replicated the behavior of a typical Android app. Right now there is no back end, I'm just using an object array in my controller. I have a basic list with a few items in it. When the list is clicked I want the array of the index as well as the details to be passed to a details page. This is the list.
<md-list-item class="md-3-line" ng-repeat="it in ec.events" ng-href="#/details">
<!--<md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">-->
<div class="md-list-item-text" layout="column" style="margin:5px 0;">
<!--<md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>-->
<h3>{{it.description}}</h3>
<p><span style="color:black">Chapter: </span>{{it.chapter}}</p>
<p><span style="color:black">Date: </span>{{it.date}}</p>
<p><span style="color:black">Type: </span>{{it.type}}</p>
<p><span style="color:black">Days: </span>{{it.outing_days}}</p>
</div>
<md-divider></md-divider>
</md-list-item>
Right now I have and ng-href with a link to details but I need to pass the list info along to my new view. Here is the basics of the details page
<md-content flex layout-padding>
<p>{{description}}</p>
<p>{{chapter}}</p>
<p>{{type}}</p>
<p>{{date}}</p>
<md-content>
Both views share the same controller which contains a basic object array.
controller('AppCtrl',function($scope){
$scope.events = [
{description:'description1',date:'07/25/2016',type:'music',chapter:'Arizona'},
{description:'description2',date:'08/15/2016',type:'movie',chapter:'Texas'}
]
});
Here you go - CodePen
Pass $index to ng-click on the md-list-item.
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-list-item class="md-3-line" ng-repeat="it in ec.events" ng-href="#/details" ng-click="showInfo($index)">
<div class="md-list-item-text" layout="column" style="margin:5px 0;">
<h3>{{it.description}}</h3>
<p><span style="color:black">Chapter: </span>{{it.chapter}}</p>
<p><span style="color:black">Date: </span>{{it.date}}</p>
<p><span style="color:black">Type: </span>{{it.type}}</p>
<p><span style="color:black">Days: </span>{{it.outing_days}}</p>
</div>
<md-divider></md-divider>
</md-list-item>
<br>
Click info:
<md-content flex layout-padding>
<p>{{info.description}}</p>
<p>{{info.chapter}}</p>
<p>{{info.type}}</p>
<p>{{info.date}}</p>
<md-content>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope) {
$scope.ec = {};
$scope.ec.events = [
{description:'description1',date:'07/25/2016',type:'music',chapter:'Arizona'},
{description:'description2',date:'08/15/2016',type:'movie',chapter:'Texas'}
];
$scope.showInfo = function (index) {
$scope.info = $scope.ec.events[index];
}
});
I have a list view inside a popup , when the user select a list element I want to change this element "li" background color , I have tried the following code it was working on jQuery mobile 1.3.2 but it didn't work when i upgraded my app to 1.4.0 , How can I change the background color of the list element when the user click on it ? please help me
<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content">
Show Popup
</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<div style="text-align:center;float:center;padding-top:11px;">
<font size="6px" color="white">Countries</font>
</div>
</div>
<div id="scrollContent" class="content" data-role="content" style="background-color: white;">
<ul data-role="listview" id="countrieslist" style="margin: 0 !important;">
</ul>
</div>
</div>
</div>
Java script code
$('#index').on( 'pageinit',function(){
for(var i=1;i<=50;i++)
{
$('#countrieslist').append('<li id="'+i+'">'+''+'<font>'+Country+i+'</font>' +'</li>');
}
$('#countrieslist').listview('refresh');
});
$('#Btn1').on('touchstart', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
You have a little typo in your loop that creates the countries, but other than that the code seems to work,
Here is a working DEMO
Because pageinit is deprecated n 1.4, I have used pagecreate; and in the for loop the word country after the font tag should be within the single quotes as it is not a variable. Also, in the li click, I reset all other countries to transparent background before setting the newly selected one:
$(document).on( 'pagecreate', '#index',function(){
for(var i=1;i<=50;i++) {
$('#countrieslist').append('<li id="'+i+'"><font>Country' + i +'</font></li>');
}
$('#countrieslist').listview('refresh');
$('#Btn1').on('click', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$('#countrieslist li').css({background: 'transparent'});
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
});
Im using the jQuery Mobile Filter List:
http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html
Is it possible to move the position of the input field so I can put it into a div already on my page?
Using jQuery's appendTo seems to work fine but its kind of a hacky solution. Thanks
this is what I found while searching for solution to a similar problem.
HTML code example:
<div data-role="page" id="page-id">
<div data-role="content">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" />
</div>
<div class="filter-div" data-filter="one">1</div>
<div class="filter-div" data-filter="two">2</div>
<div class="filter-div" data-filter="three">3</div>
<div class="filter-div" data-filter="four">4</div>
<div class="filter-div" data-filter="five">5</div>
</div>
</div>
JS code example:
$(document).delegate('#page-id', 'pageinit', function () {
var $filterDivs = $('.filter-div');
$('#search').bind('keyup change', function () {
if (this.value == '') {
$filterDivs.slideDown(500);
} else {
var regxp = new RegExp(this.value),
$show = $filterDivs.filter(function () {
return ($(this).attr('data-filter').search(regxp) > -1);
});
$filterDivs.not($show).slideUp(500);
$show.slideDown(500);
}
});
});
This way you can place your input text box anywhere on your page and it should properly filter a list of items you want.
JSFiddle DEMO: http://jsfiddle.net/cZW5r/30/
Im trying to modify grid layout so that if the user clicks a grid row, another grid row is appended to the selected grid row and displays extra information about the selected grid. Is this possbible using jQuery mobile ?
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height:20px">A</div>
</div>
It's not fully functional but I hope this give you an idea, Live Example: http://jsfiddle.net/F6Zdp/44/
HTML:
<div data-role="page" id="gridplus">
<div data-role="content">
<div class="ui-grid-a" id="currentgrid">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:50px">I'm a Block and text inside will wrap.</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:50px">I'm a Block and text inside will wrap.</div></div>
</div>
<br />
<input type="button" id="addcolumn" name="addcolumn" value="Add Column"/>
<input type="button" id="removecolumn" name="removecolumn" value="Remove Column"/>
</div>
</div>
JS:
var currentGrid = $('#currentgrid');
var previousGrid;
$('#addcolumn').click(function() {
grid = currentGrid.attr('class');
previousGrid = grid;
nextGrid = grid.substring(0,grid.length-1)+String.fromCharCode(grid.charCodeAt(grid.length-1)+1);
$('#currentgrid').removeClass(grid).addClass(nextGrid);
$("#currentgrid").children().each(function() {
c = $(this);
block = c.attr('class');
nextBlock = block.substring(0,block.length-1)+String.fromCharCode(block.charCodeAt(block.length-1)+1);
if($('.'+nextBlock).length) {
doNothing = true;
} else {
c.after('<div class="'+nextBlock+'"><div class="ui-bar ui-bar-e" style="height:50px">I\'m a Block and text inside will wrap.</div></div>');
}
});
});
$('#removecolumn').click(function() {
grid = currentGrid.attr('class');
$('#currentgrid').removeClass(grid).addClass(previousGrid);
$("#currentgrid").children().last().remove();
}).page();
Use collapsable content - http://jquerymobile.com/demos/1.0a4.1/docs/content/content-collapsible.html
The content can be a jQuery grid I think.