Angular Material md-select not binding

时间:2016-06-20 06:54:02

标签: javascript html angularjs material-design angular-material

大家好,感谢您阅读,我遇到了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,但它绑定了另一个不符合模型原始的对象。

知道我做错了什么?

3 个答案:

答案 0 :(得分:6)

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

跟踪我需要在我的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>

现在我所有的模特都显示得很好。感谢您的阅读,如果我浪费您的时间,请抱歉。

答案 1 :(得分:2)

我亲身体验了这一点并试图采用不同的解决方案无济于事。最终修复是使用控制器实例变量而不是$ scope来保存ng-model值。

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

答案 2 :(得分:0)

你去了 - 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"}];
});