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，但它绑定了另一个对象，与模型的原始对象不符。你觉得我做错了什么？

- Paulo Galdo Sandoval

Answer 1

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

为了跟踪对象，我需要在我的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>

现在我的所有模型都正常显示了。感谢您的阅读，如果浪费了您的时间，我很抱歉。

- Paulo Galdo Sandoval

---

你也可以这样做："ng-repeat="proveedor in proveedores track by proveedor.idProveedor". https://docs.angularjs.org/api/ng/directive/ngRepeat - kuhnroyal

如果您没有ID，但想要使用两个属性进行跟踪，应该如何操作呢？感谢。 - Mustafa

Answer 2

我亲身经历过这个问题，并尝试了不同的解决方案，但都没有成功。最终的解决方法是使用控制器实例变量来保存ng-model的值，而不是使用$scope。

因此，在检索更新后的模型值时，不要引用$scope.somemodel，而应该使用this.somemodel。

- Isaac

Answer 3

这是你需要的 - 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"}];
});

- camden_kid

---

抱歉，但这只是添加了图标的依赖项，仍然没有解决我的绑定问题。我已经可以使用此选择创建对象（这是产品的CRUD），但在需要更新此对象（产品）时它不显示值，有些地方出了问题并且初始化错误。 - Paulo Galdo Sandoval