CODEWITHSUNDEEP
angularjs
Buster
Buster

Reputation: 697

Angularjs md-select not showing md-model

I have two md-select dropdown boxes showing on my page and for some reason, I can get the value of one to display from $scope but not the other.

The working md-select looks like this and works fine:

<div class="col-md-4">
 <label for="">Units</label>                        
   <md-select style="margin:0px" name="units" ng-model="product.units" aria-label="select" required>
    <md-option value="kg">kg</md-option>
    <md-option value="g">g</md-option>
    <md-option value="mg">mg</md-option>
   </md-select>                       
  <span></span> 
</div>

The md-select that does not work looks like this:

<div class="form-group">
  <label for="">Supplier</label>
   <md-select style="margin:0px" ng-model="product.compname" name="supplier" aria-label="select" >
     <md-option value="kg">kg</md-option>
     <md-option value="kg">mg</md-option>
    </md-select> 
     <span></span>
</div>

I have no idea why but when I replace "product.compname" with "product.units" it works fine. However when I try to replace it with other product data like "product.name" it doesn't work either.

UPDATE:

After a lot of good help I'm trying to setup the md-select like the docs but I'm still having issues. My scope for the two varialbes looks like this:

$scope.suppliers = data.data; 
$scope.selectedSupplier = [ $scope.suppliers[$scope.product.supplier] ];

In the console, both suppliers and selectedSupplier look fine. On the html page I have the following but it's still not working. I can see all the suppliers in the list but the page still loads with the dropdown box blank and no options selected. What do you think?

<md-select ng-model="selectedSupplier" ng-model-options="{trackBy: '$value.id'}">
 <md-option ng-value="supplier" ng-repeat="supplier in suppliers">{{ supplier.compname }}</md-option>
</md-select>

Upvotes: 0

Views: 2229

Answers (2)

Anti Monitor
Anti Monitor

Reputation: 1

Maybe you are forgetting to add the 'ngMaterial' module to the list

var myApp = angular.module('microwaveGUI',['ngMaterial', 'ui.tree', 'angularResizable', 'ngMap', 'withLocals', 'ngRoute']);

Upvotes: 0

Kalpana
Kalpana

Reputation: 198

Did you take a look at the Angular material demos?

https://material.angularjs.org/latest/demo/select

I am not sure why you want to have ng-value and ng-model both set to the value of product.compname?

The most common use case would be one of these:

<md-select ng-model="drinkSelected">
    <md-option value="water">Water</md-option>
    <md-option value="juice">Juice</md-option>
    <md-option value="milk">Milk</md-option>
    <md-option value="wine">Wine</md-option>
    <md-option value="mead">Mead</md-option>
</md-select>

or

<md-select ng-model="drinkSelected">
    <md-option ng-repeat="drink in drinks" value="{{drink}}">{{drink}}</md-option>
</md-select>

Note: I couldn't comment due to not enough reps so I have answered the question.

UPDATE:

Your update looks fine. Can you please share a trimmed down version of your code in plunker or codepen?

Upvotes: 2

Related Questions