b1narystudio / md-chips Goto Github PK
View Code? Open in Web Editor NEWAngular Chips directive following Google Material Design guidelines
Angular Chips directive following Google Material Design guidelines
Hi there,
I have existing angularjs project and I found this extremely nice chip control. Unfortunately when I attempt to use it I struggled with two main issues:
Missing details list - when chip is already shown in input line, if you click on it, it should open details line, from where you can choose either to close the chip or to switch between available chip items (if any). However, when I click on the chip the list does not appear. A little digging into mdchips.js
file shows me that the problem is inside the following piece of code:
scope.showMore = function(index, event){
....
$timeout(function() {
if (element[0].querySelector('#chips-list')){
this.chipsText[this.mdTitle] = '';
element[0].querySelector('#chips-list').remove();
}
chipsActive.appendChild(chips[0]); // -->when this line is executed, the list appears, however after that when $apply method is executed the list disappears
});
....
}
So as you can see above, the list appears and been injected into DOM, however, as long as $apply
method executes as the part of the digest
cycle, the list disappears.
So how can I solve both issues?
Thanks in advance
I have some question about your md-chip:
Does your md-chips support drag and drop within an md-chips collection and between not related md-chips collections?
I'm going to implement keyboard navigation for list of items from general list and in selected chips with multiple subtitles
Right now we can select the same chip multiple times as per demo. I think it will be good if duplicates are not allowed.
Hello!
when i use this md-chips directive with my material project where i already use 'ngMaterial' its throw me the following error:
[$compile:multidir] Multiple directives [mdChips (module: material.components.chips), mdChips] asking for new/isolated scope on:
so please give me the solution ASAP
can we use readonly attributes for chip???
Hi I Used md-chips directive inside form tag. If Select the value using enter button ng-click event automatically fires. Here sendInmail() function is also executed while select value using enter button how to solve this one?
Here I pasted the HTML form.
md-chips collection='mdchipsFormatedContacts' ng-model='selectedUsers' md-title='title' md-thumbnail='thumbnailUrl' md-subtitle='subtitle' md-item='items' disabled='false' unique='true'"
input type="text" class="form-control" id="inputPassword3" placeholder="Subject" ng-model="composemail.subject"
button class="btn btn-success" ng-click="sendInmail()" Send button
When using bower to install this package, it install v0.0.2 by default.
But the latest version is v0.2.1, I need to use bower install B1naryStudio/md-chips#master --save
to get the latest version.
So, please update the package in bower. π
Hi,
It would be nice if it could also be used also to render a list of "users" as simple links (for example each item has to have an url propery). Also the input field should be optional.
As stated in the design specification:
Touching them invokes the full entity view in a card or full screen view or invokes a menu of options related to that chipβs entity.
Maybe it should also be possible to provide a directive property with a function reference name. The function could then be invoked with the item as argument when a chip is clicked..
Btw:
Greate idea. and thanks for sharingI just searched for such a component. Do you plan to integrate this work into the https://material.angularjs.org project?
Other question. What will be the license of this project?
If I set the elements like the example says, mdChips works! But, I initialize the array elements as an empty array. If I try to load them inside a callback of an AJAX, the array elements still empty. Is there any way to update the elements on md-chips tag?
How to disable Chips Disable directive without checkbox???
Is it possible to have a dynamic collection that is asynchronously loaded?
I have an Ionic project and I want to use the md-chips but it doesn't work
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.