Question

所以我使用Materialise css和Angular js ..

当我更改模型值时，选择没有更新（如果我从该示例中删除了实体化，一切正常）...

当我添加materialize js时，看起来绑定完全被破坏了。也许有人已经解决了某种问题..

<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

Answer 1

刷新选择值后应调用M.FormSelect.init，但应在setTimeout中调用它以确保值已更新。

例如：

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>

使用角度和ng模型更改模型时，不会更新物化选择

1 个答案: