krescruz / angular-materialize Goto Github PK
View Code? Open in Web Editor NEWAngularjs directives for Materialize CSS Framework https://github.com/Dogfalo/materialize
License: MIT License
Angularjs directives for Materialize CSS Framework https://github.com/Dogfalo/materialize
License: MIT License
Great work guys, i only just recently discovered the entire materialize framework and its wonderful.
I'm using the data-closeonclick="true" option for side-nav. It works, but the overlay doesn't disappear sometimes and at other times it disappears as it should.
i want to use this component in angular project.
Hi. I'm trying to add my parent controller's scope value inside my modal div but it just wouldn't show. Any ideas?
HMTL
<div ng-controller="projectsController">
...
<div ng-repeat="project in projects">
<div data-target="demoModal" modal>
<h6>{{project.name}}</h6>
</div>
</div>
<project-modal></project-modal>
...
</div>
I'm a bit new to Angular and might have missed something.
Dear Krescruz, I faced with problem with ui-route. it is not work well.
Tabs indicator is not showing. 'hash' is undefined error came.
Something like this would have saved me tons of time
angular.module('angular-app', [
'angular-meteor',
'ui.router',
'ui.materialize'
]);
When I try to use material-select
, Angular returns an error: undefined is not a function
. The error is produced by element.is("select")
.
I'm not directly using $scope
in my app. Instead, I'm using TaxController as tax
and the following element
<select class="" ng-model="tax.taxTable" material-select>
<option ng-repeat="i in [29, 30, 31, 32, 33, 34, 35, 36, 37]">{{i}}</option>
</select>
$scope.month = ['Januar', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
https://github.com/krescruz/angular-materialize/blob/master/js/app.js#L34
Any plans to implement directives for the other JS components?
I can try to help, but not an angular expert by any means ;)
Love the materialize framework and would love to see angular directives.
I am getting the following error:
Uncaught TypeError: Cannot read property 'top' of undefined
$.fn.scrollTo @ dropdown.js?body=1:6
$.fn.material_select.$.each.activateOption @ forms.js?body=1:325
(anonymous function) @ forms.js?body=1:314
jQuery.event.dispatch @ jquery.js?body=1:4436
jQuery.event.add.elemData.handle @ jquery.js?body=1:4122
States is javascript object
window.States =
"New York":
["Buffalo","Rochester"]
"California":
["San Jose", "Los Angeles"]
Slim syntax of my applications code
.input-field.col.s12.l6
select#state material-select="" ng-model="centre.state" valueattr="value" ng-options="state for (state,city) in states"
option value="" disabled="" selected="" Select State
.input-field.col.s12.l6
select#cities material-select="" ng-model="centre.city" valueattr="value" ng-options="city for city in states[centre.state]"
option value="" disabled="" selected="" Select City
This feature is a dependent dropdown which is not working with material-select i.e. Once State is selected then cities are to populated, It is working perfectly fine with Browser-default but not with Material select
Because of this i am unable to use material-select and have to fallback to browser-default which is giving a bad UI look throughout my application
Currently, i am using input-date directive,
< input input-date
ng-model="tourOptions.tourStarts"
format="dd mmm"
type="text"
....
>
Problem is tourOptions.tourStarts
is giving the data in string like 23 Sep, is there any way to get actual date object through ng-model or onSet?
When using input-date and opening the date picker, there is a weird blue selection that occurs in the background. This occurs approximately 800px above the date input, so make sure the window height is greater than 800px. I have attached an image showing this happening on the angular-materialize docs page. This does not seem to happen on the original materializecss.com date picker.
I have tested in Chrome 43. It does not seem to happen in Safari.
Any way to fix this? It looks a bit ugly on a production site. The selection remains when the date picker is closed, until you click elsewhere on the screen.
Hi,
I'm using the following select:
<select ng-model="tune.period.value" ng-options="value.label for value in tune.period.values" material-select ></select>
with the following in my controller:
$scope.tune = [];
$scope.tune.period = {
value: {label: "Any time", value: "any"},
values: [
{label: "Any time", value: "any"},
{label: "Past 24 hours", value: "24hours"},
{label: "Past week", value: "week"},
{label: "Past month", value: "month"},
{label: "Past year", value: "year"}]
};
$scope.tune.period.value = $scope.tune.period.values[0];
and i get this upon initialization and when seleting a value:
RangeError: Maximum call stack size exceeded
at HTMLOptionElement.n.event.dispatch (jquery-2.1.4.min.js:3)
at HTMLOptionElement.n.event.add.r.handle (jquery-2.1.4.min.js:3)
at Object.n.event.trigger (jquery-2.1.4.min.js:3)
at n.fn.extend.triggerHandler (jquery-2.1.4.min.js:3)
at Function.la.fn.on.la.cleanData (angular.js:1747)
at n.fn.extend.remove (jquery-2.1.4.min.js:3)
at Je.link.u.writeValue (angular.js:26172)
at le.link.f.$render (angular.js:28124)
at HTMLOptionElement.<anonymous> (angular.js:28243)
at HTMLOptionElement.n.event.dispatch (jquery-2.1.4.min.js:3)
any clue why this is happening?
Hi, I'm trying to implement pagination in my site but it just won't work in chrome. It appears, but it doesn't call the function defined in pagination-action (it does work on firefox). The worst thing is, I took a look at the sample code in your page and that sample is supposed to create toasts but they don't appear either (no toast is working in the sample page in fact). Could you take a look at it please?
hi,
I'm wondering if there is an option to input the date manual so not the datepicker.
But if the user wants it would still be available.
Mostly because I'm using it for defining a time period, which can be 5 year, so then you would have to click 60 times on the month thingy, so it would be easier if you could just lower the year number manually
I can't seem to get the slide-in to work with the menu-icon
Am I missing something obvious?
<body ng-app="skillWeb" ng-controller="IndexCtrl as indexCtrl">
<header>
<!--TOP NAV-->
<nav class="top-nav">
<div class="container">
<div class="nav-wrapper">
<a class="page-title">title</a></div>
</div>
</nav>
<!--MENU ICON-->
<div class="container">
<a href="#"
data-activates="nav-mobile"
class="button-collapse top-nav "
data-sidenav="left"
data-closeonclick="false">
<i class="mdi-navigation-menu"></i></a>
</div>
<!--SIDE MENU-->
<ul id="nav-mobile"
class="side-nav fixed">
<div class="center-align">
<img src="img/logo.jpg" style="max-height: 120px;">
</div>
<li class="no-padding">
I'm unable to reproduce the material select example at http://krescruz.github.io/angular-materialize/#select
See http://jsbin.com/vanuxunise for minimal example taken from github.io site.
When inspecting the github.io page, I see that "select-wrapper" element is created in the DOM. However, it does not appear to be created in the JSBin example or in other attempts I have made to work with it.
Adding the "browser-default" element class to the select element does cause the element to render.
Can anyone see what example I'm missing here? I'm probably overlooking something, but I haven't been able to find anything in the documentation or source that differs from the JSBin example.
Thanks.
I am looping on array and creating selects elements and when I am using the class default-browser its works fine but when I remove this class and use the materialize design I get this error:
Cannot read property 'replace' of undefined.
<div ng-repeat="work in upw.workData track by $index">
<div>
<select name="startDate" ng-model="work.start_date.month"
ng-options="mon for mon in upw.months"
material-select>
<option value="">Month</option>
</select>
</div>
</div>
Sir
It would great if you add accordion in this package. One of application use materialize and angular. Ordinary materialize accordion is not working with Angular ( I don't know), Bootstrap accordion is very much different from materialize accordion. Can you please add this feature in new update
Thanks in advance
The name of materialize in bower library is 'Materialize', the dependency of current bower.json is 'materialize' . It will duplicate the dependencies in the project which will case some very weird issue...
Hi,
I use a service to get an object array, and using that for the select in the following way:
in controller:
$scope.teams = Team.index();
then in html:
<select material-select ng-model="currentTeam" class="col s6">
<option ng-repeat="team in teams" value="[[team]]">[[team.name]]</option>
</select>
but when the page loads there is an empty object availible, but when I select that the real data is loaded (so I think the update in the scope isn't forwarded to the select)
then when the real data is in the dropdown the following error is in my console:
16:06:01.188 TypeError: $(...).offset(...) is undefined
also the dropdown is hidden by the card class if the height is larger, and its hiding behind buttons
some things I can update (like the hiding, but just letting this know that you are aware of these problems)
Please change scope type of pageSize and total from '@' to '='. This is to have paginator dynamically change itself when different data counts received from server.
I have a ongoing project that uses jquery Lite as a dependency and cannot change to another jQuery version as describe as necessary. That would take too much time to change.
Is that possible?
Thank you.
Love what you are doing with materialize! Just ran into one issue. When working with the collapsible if the scope changes the collapse functionality stops working. For example if I have a scope that has an array in it, if I have a function that removes one item from the array, the collapse functionality stops working. Might be user error on my side, just let me know.
Thanks!
I want to highlight input fields that fail validation in real time. Normally this is done using the ng-invalid
class and masked when ng-pristine
is present. However, it is impossible to have an ng-pristine
input because the change
event in the inputField
controller makes AngularJS think the form has been modified.
Hello,
I'm having the following error when I injected ui.materialize and ui.router modules:
so I get the following error:
Error: $injector:modulerr
Module Error
Description
This error occurs when a module fails to load due to some exception. The error message above should provide additional context.
I really appreciate any hint,
Regards.
say you want to generate the tabs dynamicly, you would have to do the following right?
<div class="row">
<div class="col s12">
<ul class="tabs" tabs>
<li class="tab col s3" ng-repeat="detailTab in tabUsers"><a ng-href="#{{detailTab.name}}">{{detailTab.name}}</a></li>
</ul>
</div>
<div ng-repeat="detailTab in tabUsers" id="{{detailTab.name}}" class="col s12">{{detailTab.content}}</div>
</div>
and with the follwoing in the controller:
$scope.tabUsers = [
{
name: "test",
content: "Stuff"
},
{
name: "test2",
content: "Stuff2"
}
];
this would work you think?
but not I'm getting the following:
TypeError: Cannot read property 'hash' of undefined
Hi,
When you have initial data for your text-area it doesn't set the auto height, is there a way to manual trigger it or a sollution?
the problem is illustrated here: http://plnkr.co/edit/zd2hV4xaCoyhFKDvzGAX?p=preview
do any update in the text-area and then it updates the height
Hi! First of all, thanks for the great work!
can you explain me the behavior of the linking function
link: function (scope, element) {
$timeout(function () {
angular.element(element).find("input").change();
});
},
inside the inputField directive? if i wrap your directive inside another directive template, the parent controller scope variable will not set anymore. Stupid Example:
app.directive('customInputText', function(){
return {
restrict : 'E',
scope : {
'model' : '=',
'label' : '@label'
},
template : function() {
return '<input-field><input ng-model="model" type="text" /><label>{{label}}</label></input-field>';
}
}
});
if a controller now sets the scope variable model to "foobar" the value will not assigned. Looks like the two-way databinding does not work anymore. if we remove the linking function from your inputField directive, everything works fine. Can you explain me this (expected?) behavior?
Slider is included in Materialize. Is it possible to add a slider using angular-materialize?
Hi, in Materializecss we can set this options:
dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background
in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration
ready: function() { alert('Ready'); }, // Callback for Modal open
complete: function() { alert('Closed'); } // Callback for Modal close
So, as a directive, where and how can we modify/set this options? inside the Controller? at the end of the index.html in a script tag?
I can't seem to figure out how to use material-select with objects. I'm trying to do something like this:
$scope.accounts = [{id: 1, name: 'one'}, {id: 2, name: 'two'}, {id: 3, name: 'three'}];
$scope.currentAccount = accounts[0];
<select material-select ng-model="currentAccount">
<option ng-repeat="account in accounts" value="{{account}}">{{account.name}}</option>
</select>
The behavior is really weird. one
seems to select 2
. two
selects 3
, and three
selects 3
.
Hi,
I'm trying to show the range tooltip when using the materializecss range thingy, but in the code of materialize I can't seem to find a function that does this, or I might be overlooking something
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
and in the materializecss javascript you can find the relavant code @ line 2614, or the input[type] handling @ line 2454
I found out that this module needs JQuery the hard way. Can we remove the JQuery dependency?
I've been using materialize as my css framework for my angularjs project... and then I found this.. could you tell me how to use it ?
When I was trying to use select from materialize with angular i saw weird triangle (caret) appended to input-field after each change in select. When I was search for solution I find in materialSelect directive code that initializing material-select after every change. Is it necessary? I remove last "if" and problem disappeared.
Edit: In my project I use materialize in 0.97.0 version. When I downgrade to lower version it solve the problem. Maybe you could add fix to this project that let him work with latest materialize?
In case of Date of Birth of to select a Date two year down the line currently I have to press Next button 24 Times
As shown on http://materializecss.com/forms.html
They have a Year Dropdown Supported, how to get this here ?
Hi,
is there a way to disable the input-date? like adding ng-readonly
to disable the thingy.
First of call, thank you for porting materialize css into angular. The datepicker looks really cool. I like to suggest that the year selection should be more intuitive. The current 'select-years' property which enable the year selection seems kinda funky. It created a year range for the 'select-years' that not necessary helpful in most UI situation. It would be great to have 'year-future' to enable selection for year in the future and 'year-past' otherwise. Thanks!
Have you thought about adding a library to bower?
I have added the date picker as the example but it does nothing, i cant select a date, cant close it, cant set dates, it just apears doing nothing, here is the code of the example:
Html:
<label for="inputCreated">Input date</label>
<input input-date
type="text"
name="created"
id="inputCreated"
ng-model="currentTime"
container="body"
format="dd/mm/yyyy"
months-full="{{ month }}"
months-short="{{ monthShort }}"
weekdays-full="{{ weekdaysFull }}"
weekdays-short="{{ weekdaysShort }}"
weekdays-letter="{{ weekdaysLetter }}"
today="today"
clear="clear"
close="close"
select-years="15"
on-start="onStart()"
on-render="onRender()"
on-open="onOpen()"
on-close="onClose()"
on-set="onSet()"
on-stop="onStop()" />
and the controller:
var currentTime = new Date();
$scope.currentTime = currentTime;
$scope.month = ['Januar', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
$scope.monthShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$scope.weekdaysFull = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
$scope.weekdaysLetter = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
$scope.today = 'Today';
$scope.clear = 'Clear';
$scope.close = 'Close';
$scope.onStart = function () {
console.log('onStart');
};
$scope.onRender = function () {
console.log('onRender');
};
$scope.onOpen = function () {
console.log('onOpen');
};
$scope.onClose = function () {
console.log('onClose');
};
thanks for the project
Im having issues getting parallax images to initialize and stumbled on your plugin. I dont see anything mentioned about any fixes for parallax in your documentation so maybe it works and Im doing something wrong.
I have a simple test site that has an index.html. then a partial.html. The parallax container works fine in the index.html but not in the partial.html. All other materialize components seem to work fine in the partial except parallax.
Is it something I am doing wrong or does angular break this? Can you help me out please?
Issue when installing using bower
It would be great to have support for modals.
http://materializecss.com/modals.html
It looks like modals should be available outside of angular-materialize in the baseline materializecss but only if the modal contents are already on the page. This is problematic in Angular because it means controllers will already have run, and also because modal contents are cluttered on the main page.
It would be nice to be able to create the DOM elements fresh and run the ng-controller
from scratch.
hi,
I have a date that comes in via the following format: 17-07-2015
how would you make it so it doesn't say: invalid date
without splitting the date and converting it myself to yyyy-MM-dd
I see some stuff on UTC, but not understanding where I can access them
For now I rewrote the link function of the date: to this;
ngModelCtrl.$formatters.unshift(function (modelValue) {
if (modelValue) {
var date;
var parts = modelValue.split("-");
if (parts.length > 0 && parts[2].length == 4) { // other type format
date = new Date(parts[2], parts[1], parts[0]);
} else {
date = new Date(modelValue);
}
return (angular.isDefined(scope.format)) ? date.format(scope.format) : date.format('d mmmm, yyyy');
}
return null;
});
Date picker is binded through code one time only. Again if we try to bind the model through code its not working.
Putting 'li' tags with ng-if on them don't ever show up in the menu even if they evaluate to true.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.