CODEWITHSUNDEEP
javascripthtmlangularjsmaterial-designangular-material
Paulo Galdo Sandoval
Paulo Galdo Sandoval

Reputation: 2203

Angular Material md-select not binding

Hello all thanks for reading, i'm having a issue with Angular Material md-select

it doesn't bind with my model. i'm using it to make a form to update data of this model.

<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>

i've tried to use ng-selected but it bind another object that doesn't fit with the original of the model.

any idea what i'm doing wrong?

Upvotes: 4

Views: 6232

Answers (3)

Isaac
Isaac

Reputation: 307

I've experienced this first hand and attempted different solutions to no avail. The ultimate fix was using a controller instance variable instead of $scope to hold the ng-model value.

Instead of referencing $scope.somemodelto retrieve the updated model value, use this.somemodel.

Upvotes: 3

Paulo Galdo Sandoval
Paulo Galdo Sandoval

Reputation: 2203

Ok, after a good sleep and hours of searching i've found the solution of this.

to keep track of the objects i need to add a property on my md-select

in this case something similar to this: 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>

now all my models are display fine. Thank you for reading and sorry if i waste your time.

Upvotes: 7

camden_kid
camden_kid

Reputation: 12813

Here you go - CodePen

Markup

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

Upvotes: 0

Related Questions