使用Angular Material md-select而不使用ng-repeat

时间:2016-12-10 05:10:35

标签: javascript angularjs angularjs-ng-repeat angular-material

我试图在没有ms-select的情况下使用ng-repeat,但它似乎无法正常工作。是否可以以这种方式使用它,或者我必须将其与ng-repeat

一起使用

这是我的代码:

HTML:

<div ng-controller="AppCtrl as ctrl" class="md-padding" ng-cloak layout="column">
  <md-select ng-model="ctrl.userState">
    <md-option>
      <em>None</em>
    </md-option>
    <md-option ng-value="AL">AL</md-option>
    <md-option ng-value="NY">NY</md-option>
    <md-option ng-value="CA">CA</md-option>
    <md-option ng-value="WA">WA</md-option>
  </md-select>
</div>

JS:

angular
  .module('app')
  .controller('AppCtrl',
      function() {
          this.userState = 'AL';
      });

1 个答案:

答案 0 :(得分:3)

是的,你可以使用,而不是ng-value只使用值,

<强>样本

&#13;
&#13;
var app = angular.module('app', ["ngMaterial"]);
app.controller('AppCtrl', function($scope) {
  this.userState = 'AL';
});
&#13;
<!DOCTYPE html>
<html ng-app="app">

<head>
  <link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script data-require="angular-material@0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
  <script data-require="angular-animate@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
  <script data-require="angular-aria@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="AppCtrl as ctrl">
  <div layout="row">
    <md-select ng-model="ctrl.userState">
      <md-option>
        <em>None</em>
      </md-option>
      <md-option value="AL">AL</md-option>
      <md-option value="NY">NY</md-option>
      <md-option value="CA">CA</md-option>
      <md-option value="WA">WA</md-option>
    </md-select>
  </div>
  <div layout="row">
    return value: {{ctrl.userState}}
  </div>
</body>

</html>
&#13;
&#13;
&#13;