search

angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.54k stars 3.39k forks source link

feat(contact-chips): add support for md-on-add/remove/select #10051

Open recursionbane opened 7 years ago

recursionbane commented 7 years ago

Actual Behavior:

CodePen (or steps to reproduce the issue): *

Angular Versions: *

Additional Information:

UPDATE: md-removable doesn't work, either!

skapin commented 7 years ago

Up, still not working

skapin commented 7 years ago

For the one who want to patch it:

Add : 

md-on-add="$mdContactChipsCtrl.mdOnAdd()($chip)"\
md-on-remove="$mdContactChipsCtrl.onRemove()($chip)"\

to MD_CONTACT_CHIPS_TEMPLATE in angular-material

(like this)

var MD_CONTACT_CHIPS_TEMPLATE = '\
      <md-chips class="md-contact-chips"\
          ng-model="$mdContactChipsCtrl.contacts"\
          md-require-match="$mdContactChipsCtrl.requireMatch"\
          md-on-add="$mdContactChipsCtrl.mdOnAdd()($chip)"\
          md-on-remove="$mdContactChipsCtrl.onRemove()($chip)"\
          md-autocomplete-snap>\
          <md-autocomplete\
topherfangio commented 7 years ago

@skapin You interested in submitting a PR? This seems like a since/simple/safe addition :-)

skapin commented 7 years ago

I can yes, but i need to overcheck it again, (especially if no func. is specified)

daniymilner commented 7 years ago

Hello! Can we get a solution of this problem?

skapin commented 7 years ago

An answer is above, check my previous post :)

skapin commented 7 years ago

For the glory of satan, I repost updated for easy use : 

var MD_CONTACT_CHIPS_TEMPLATE = '\
      <md-chips class="md-contact-chips"\
          ng-model="$ContactChipsCtrl.contacts"\
          md-require-match="$ContactChipsCtrl.requireMatch"\
          md-max-chips="{{$ContactChipsCtrl.maxChips}}"\
          md-on-add="$ContactChipsCtrl.mdOnAdd()($chip)"\
          md-on-remove="$ContactChipsCtrl.mdOnRemove()($chip)"\
          md-autocomplete-snap>\

AND then in the Ctrl : 

return {
    template: function(element, attrs) {
      return MD_CONTACT_CHIPS_TEMPLATE;
    },
    restrict: 'E',
    controller: 'ContactChipsCtrl',
    controllerAs: '$ContactChipsCtrl',
    bindToController: true,
    compile: compile,
    scope: {
      contactQuery: '&mdContacts',
      placeholder: '@',
      secondaryPlaceholder: '@',
      contactName: '@mdContactName',
      contactImage: '@mdContactImage',
      contactEmail: '@mdContactEmail',
      mdOnAdd: '&',    /** This is new **/
      mdOnRemove: '&',  /** This is new **/
      contacts: '=ngModel',
      maxChips: '@?mdMaxChips',
      requireMatch: '=?mdRequireMatch',
      highlightFlags: '@?mdHighlightFlags'
    }
  };

Feel free to update and share. I use this code in a redefined ctrl to avoid colision with existing one. I changed some name to post it here as much generic as possible.

edgartheunready commented 7 years ago

I'd like to upvote this fix. Do we just need a PR put together? I blew 4+ hour on this issue today assuming that md-contact-chips conformed to the same interface as md-chips (because I didn't know there was a difference.) Especially since on the documentation md-chips and md-contact-chips are presented on the same demo page: https://material.angularjs.org/latest/demo/chips

This is all coming from a newby to this project.

batsauto commented 7 years ago

In my opinion, switching to angular material >= 1.1.2 fixes this issue. Maybe I don't completely understand but I think this is resolved.

tux1337 commented 6 years ago

I can confirm the issue still persists with v1.1.5; would be great if it would be fixed. md-contact-chips should have the same functionality than md-chips

Splaktar commented 6 years ago

Yes, please put a PR together from the above and we'll try to get it merged.