AngulaJs Material

md-select - Set aria-label attribute to disable warning.

by mrk m

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
<script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://gitcdn.link/repo/angular/bower-material/master/angular-material.css">
<div ng-app="myApp">
  <form name="pForm" ng-controller="pController" class="container-fluid" ng-true-value="1" ng-false-value="0" aria-label="ShowHideAccountant">
    <div class="col-xs-12">
      <label>Area Picker : </label>
      <md-select ng-model="widgetType" aria-label="Select">
        <md-option ng-value="t.title" data-ng-repeat="t in widget">{{ t.title }}</md-option>
      </md-select>

      <label>Business Impact : </label>
      <md-select ng-model="businessImpactType" aria-label="Select">
        <md-option ng-value="option.name" data-ng-repeat="option in businessImpact">{{option.name}}</md-option>
      </md-select>
    </div>
  </form>
</div>

JavaScript

var yApp = angular.module('myApp', ['ngMaterial']);

yApp.controller('pController', function($scope) {
  $scope.widget = [{
    "id": "line",
    "title": "Line"
  }, {
    "id": "spline",
    "title": "Smooth line"
  }, {
    "id": "area",
    "title": "Area"
  }, {
    "id": "areaspline",
    "title": "Smooth area"
  }];

  //init
  $scope.widgetType = 'Line';

  $scope.businessImpactType = 'CAMERA';
  
  $scope.businessImpact = [{
    "id": "CAMERA",
    "name": "CAMERA"
  }, {
    "id": "smline",
    "name": "Smooth line"
  }, {
    "id": "barea",
    "name": "Area"
  }, {
    "id": "bareaspline",
    "name": "Smooth area"
  }];

});