Angular Material md-select 不绑定

Question

大家好，感谢阅读，我遇到了 Angular Material md-select

的问题

它不与我的模型绑定。我正在用它制作一个表格来更新这个模型的数据。

<md-input-container class="md-icon md-block" flex ng-controller="ProveedorController" data-ng-init="listaProveedores()">
<label>Proveedor</label>
<md-select ng-model="detalle.proveedor" required name="proveedores">
    <md-option ng-value="proveedor" ng-repeat="proveedor in proveedores">{{proveedor.nombreProveedor}}</md-option>
</md-select>

我试过使用 ng-selected 但它绑定了另一个不适合模型原始对象的对象。

知道我做错了什么吗？

Answer 1

给你 - CodePen

标记

<div ng-app="MyApp" ng-controller="ProveedorController">
  <md-input-container class="md-icon md-block" flex data-ng-init="listaProveedores()">
    <label>Proveedor</label>
    <md-select ng-model="detalle.proveedor" required name="proveedores">
      <md-option ng-value="proveedor.nombreProveedor" ng-repeat="proveedor in proveedores">
        {{proveedor.nombreProveedor}}
      </md-option>
    </md-select>
  </md-input-container>
  <br>
  Proveedor: {{detalle.proveedor}}
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('ProveedorController', function($scope) {
  $scope.proveedores = [
    {nombreProveedor: "Daffy"},
    {nombreProveedor: "Mickey"},
    {nombreProveedor: "Goofy"}];
});

Answer 2

好的，经过良好的睡眠和数小时的搜索，我找到了解决方案。

为了跟踪我需要在我的 md-select

上添加属性的对象

在这种情况下类似于此：ng-model-options="{trackBy: '$value.id'}"

<md-input-container class="md-icon md-block" flex ng-controller="ProveedorController" data-ng-init="listaProveedores()">
    <label>Proveedor</label>
    <md-select ng-model="detalle.proveedor" required name="proveedores" ng-model-options="{trackBy: '$value.idProveedor'}">
        <md-option ng-value="proveedor" ng-repeat="proveedor in proveedores">{{proveedor.nombreProveedor}}</md-option>
    </md-select>
</md-input-container>

现在我所有的模型都可以正常显示了。感谢您的阅读，对不起，如果我浪费了您的时间。

Answer 3

我亲身经历过这种情况，并尝试过不同的解决方案，但均无济于事。最终的修复是使用控制器实例变量而不是 $scope 来保存 ng-model 值。

不要引用 $scope.somemodel 来检索更新后的模型值，而是使用 this.somemodel。

Angular Material md-select 不绑定

Angular Material md-select not binding

html

javascript

angularjs

material-design

angular-material