CODEWITHSUNDEEP
angularjs-material
systemdebt
systemdebt

Reputation: 4941

md contact chips css not working

I am using md contact chips and my template looks like this

 <md-chips ng-model="ser" md-autocomplete-snap
              md-require-match="true">
      <md-autocomplete
        ng-disabled="autoCompleteOptions.isDisabled"
        md-no-cache="autoCompleteOptions.noCache"
        md-selected-item="si"
        md-search-text="searchText"
        md-items="sellable in getSellableByFilter(searchText)"
        md-min-length="1"
        md-item-text="sellable.name"
        placeholder="Search for a Service/Package here"
        md-select-on-match="true",
        >
      </md-autocomplete>
      <md-chip-template>
        <span>
          <strong>{{$chip.name}}</strong>
        </span>
      </md-chip-template>
    </md-chips>

SearchingIMG works fine but when I select an item, it looks like input field only and there is no chip like css attached.

How do I fix this?

I tried using md contact chips as well but still same issue.

error message I see in console

angular.js:14800 TypeError: Cannot read property 'some' of undefined
    at MdChipsCtrl.appendChip (angular-material.js:27822)
    at MdChipsCtrl.<anonymous> (angular-material.js:28128)
    at angular.js:1383
    at angular-material.js:25732
    at Array.forEach (<anonymous>)
    at handleSelectedItemChange (angular-material.js:25732)
    at angular-material.js:25694
    at processQueue (angular.js:17169)
    at angular.js:17217
    at Scope.$digest (angular.js:18352) "Possibly unhandled rejection: {}"
(anonymous) @ angular.js:14800
(anonymous) @ angular.js:11218
processChecks @ angular.js:17199
$digest @ angular.js:18352
(anonymous) @ angular.js:18581
completeOutstandingRequest @ angular.js:6428
(anonymous) @ angular.js:6707
setTimeout (async)
Browser.self.defer @ angular.js:6705
$evalAsync @ angular.js:18579
(anonymous) @ angular.js:17041
scheduleProcessQueue @ angular.js:17217
then @ angular.js:17138
getDisplayValue @ angular-material.js:25907
(anonymous) @ angular-material.js:26070
(anonymous) @ angular-material.js:1730
processQueue @ angular-material.js:1727
(anonymous) @ angular.js:20566
completeOutstandingRequest @ angular.js:6428
(anonymous) @ angular.js:6707
setTimeout (async)
Browser.self.defer @ angular.js:6705
timeout @ angular.js:20564
nextTick @ angular-material.js:1711
positionDropdown @ angular-material.js:25453
handleResults @ angular-material.js:26273
handleQuery @ angular-material.js:26251
focus @ angular-material.js:25824
fn @ VM61232:4
callback @ angular.js:27475
$digest @ angular.js:18352
$apply @ angular.js:18649
(anonymous) @ angular.js:27480
dispatch @ jquery.js:5206
elemData.handle @ jquery.js:5014

Upvotes: 0

Views: 425

Answers (1)

MKouhosei
MKouhosei

Reputation: 180

Your model has to be of type Array, and perhaps in your controller you're not initializing it to anything (it's undefined).

ser = []

Upvotes: 2

Related Questions