Materialize select isn't updated when model is changed using angular and ng-model

Question

So i use Materialize css and Angular js..

And select doesn't updated when i change the model value (if I remove materialize from that example, everything works fine)..

Looks like binding is broken completely when i add materialize js.. Maybe somebody already solved somehow that problem..

<div class="container" ng-app="App">
  <form ng-controller="Ctrl">
    <div class="row">
      <div class="col s12 input-field">
        <select name="selectInput" ng-model="object.select">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
       <label for="selectInput">Test select</label>
     </div>
  </div>
   <div class="row">
     <button class="btn" type="button" ng-click="click1()">
        Test 1
     </button>
    </div>
    <div class="row">
      <button class="btn" type="button" ng-click="click2()">
       Test 2
     </button>
    </div>
    <div>
      {{object.select}}
    </div>
  </form>
</div>

CSS:

angular.module('App', [])
  .controller("Ctrl", ['$scope', function($scope) {
    $scope.object = {};
    $scope.object.select = "1";

    $scope.click1 = function() {
      $scope.object.select = "1";
    }
    $scope.click2 = function() {
      $scope.object.select = "2";
    }
    $('select').material_select();
  }]);

Here is a fiddle

Refer link: https://stackoverflow.com/questions/28258106/materialize-css-select-doesnt-seem-to-render — NishiJain, Sep 22 '17 at 11:11
I think i found workaround.. is to call $('select').val(optionValue) and then $('select').material_select().. But anyway this is a bug that binding doesn't work :( — Anton, Sep 22 '17 at 12:34

score 2 · Answer 1 · answered Jul 01 '19 at 18:42

you should call M.FormSelect.init after refreshing the selection values, but call it inside a setTimeout to ensure that the values have been updated.

ex.:

import * as M from 'materialize-css';

setCities(cities) {

   this.cities= cities

   setTimeout(() => { 
      M.FormSelect.init(document.querySelectorAll('#cities'), {}) 
   }, 0)

}

<select id="cities" class="validate" [disabled]="!cities" name="cities"  [(ngModel)]="client.adress.city.id">
   <option value="" disabled selected>Select a city</option>
   <option *ngFor="let city of cities" value="{{city.id}}">{{city.name}}</option>
</select>

Materialize select isn't updated when model is changed using angular and ng-model

1 Answers1