CODEWITHSUNDEEP
angularjs
user2902067
user2902067

Reputation: 75

Angularjs md-options are showing in Inspect but not on screen

I have angular form and I am using md-select and md-option. But when I click on dropdown, freezes the screen and if I see by inspecting element md-option will be showing. 

<md-select ng-model="Severities" placeholder="Select a Severity">
    <md-select-label>{{ Severities.name }}</md-select-label> 
    <md-option ng-value="opt.id" ng-repeat="opt in severities.availableOptions">
       {{ opt.name }}
    </md-option>
</md-select>



$scope.severities= { 
    availableOptions: [ 
    {
        id: '1', 
        name: 'name1' 
    }, 
    { 
        id: '2', 
        name: 'name2' 
    }, 
    { 
        id: '3', 
        name: 'name3' 
     } 
     ], };

Upvotes: 0

Views: 863

Answers (3)

Sujay Subrahmanya
Sujay Subrahmanya

Reputation: 171

I had the same issue while generating values from an Array and to use it in ng-options. According to what I have read, ng-options could be used sometimes via ng-repeat. The alternate which You can use is as follows:

<md-select ng-model="Severities" id="Severities"><ng-options ng-repeat="opt in severities.availableOptions" ng-value="{{opt.name}}">{{opt.name}}></ng-options></md-select>

The controller code would be as 

$scope.severities= { 
 availableOptions: [ 
       {id: '1', name: 'name1' },
       { id: '2', name: 'name2' },
       { id: '3', name: 'name3' }

]};

but I have used JavaScript to fetch the values selected in ng-options.

var severity = document.getElementById("Severities").value;

later process the severity value present in variable severity.

Upvotes: 0

Amit Sirohiya
Amit Sirohiya

Reputation: 333

$scope.severities= { 
     availableOptions: [ 
           {id: '1', name: 'name1' },
           { id: '2', name: 'name2' },
           { id: '3', name: 'name3' }
]};

In your model $scope.severities.name is nothing and in md-select-label you are using this which is wrong.

Try this -

<md-select ng-model="Severities" placeholder="Select a Severity">
     <md-option ng-value="opt.id" ng-repeat="opt in severities.availableOptions">
           {{ opt.name }}
      </md-option>
</md-select>

Upvotes: 1

Hassan Tariq
Hassan Tariq

Reputation: 740

Try this i prefer using ng-option instead of ng-repeat

 <md-select ng-model="Severities" placeholder="Select a Severity" ng-option="opt as opt for opt in severities.availableOptions">

<ng-option ng-selected="true">Select Option</ng-option>

</md-select>

Upvotes: 0

Related Questions