krescruz / angular-materialize Goto Github PK

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.

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

        $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

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!

Something like this would have saved me tons of time

angular.module('angular-app', [
  'angular-meteor',
  'ui.router',
  'ui.materialize'
]);

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

hi,

when you have a date selector in a card, it hides behind your card the moment you click on a date: lfirst time opening is fine:

then when selecting something the following happens:

but once you do the following this is fixed:

.card {
  overflow: visible;
}

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 found out that this module needs JQuery the hard way. Can we remove the JQuery dependency?

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.

Tabs indicator is not showing. 'hash' is undefined error came.

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.

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.

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?

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.

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

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?

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.

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

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

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.

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?

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,

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

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)

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!

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...

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>

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 ?

Hi,

is there a way to disable the input-date? like adding ng-readonly to disable the thingy.

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.

Issue when installing using bower

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.

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?

i want to use this component in angular 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?

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.

Slider is included in Materialize. Is it possible to add a slider using angular-materialize?

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.

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?

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?

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.

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>

Dear Krescruz, I faced with problem with ui-route. it is not work well.

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

Have you thought about adding a library to bower?

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">

this is my html input box code.

When there is a default value this is what it looks like:

it overlaps my label tag which is supposed to be the placeholder, how do i prevent them from overlapping if there when the default value is initialized after the api request?