Question

我需要一些帮助和建议。我想在一个控制器上使用两种方法。第一种方法是显示所选房间，第二种方法是显示所选择的房间。但是，只有第一种方法有效，第二种md-select不会在第二种方法中显示数组。这是我的js和html代码片段：

var app = angular.module('CoreWebApp', ['ngMaterial', 'ngMessages', 'ngAnimate']);

app.controller('SelectedTextController', function($scope) {
  $scope.rooms = [1, 2, 3, 4, 5, 6, 7];
  $scope.selectedRoom;
  $scope.getSelectedText = function() {
    if ($scope.selectedRoom !== undefined) {
      return $scope.selectedRoom + " Room(s)";
    } else {
      return "Rooms";
    }
  };

  $scope.paxes = [1, 2, 3, 4, 5];
  $scope.selectedPax;
  $scope.getSelectedPersons = function() {
    if ($scope.selectedPax !== undefined) {
      return $scope.selectedPax;
    } else {
      return "Pax";
    }
  };
});

<div>
  <label>Rooms</label>
  <div layout-sm="column" layout-align="center end">
    <md-select md-no-resize ng-model="selectedRoom" md-selected-text="getSelectedText()">
      <md-optgroup label="rooms">
        <md-option ng-value="room" ng-repeat="room in rooms">{{room}} Rooms</md-option>
      </md-optgroup>
    </md-select>
  </div>
</div>

<div>
  <label>Pax</label>
  <div>
    <md-select ng-model="selectedPax" md-selected-text="getSelectedPersons()" aria-label="">
      <md-optgroup label="pax">
        <md-option ng-value="pax" ng-repeat="pax in paxes">{{pax}}</md-option>
      </md-optgroup>
    </md-select>
  </div>
</div>

Answer 1

我无法运行您的代码进行测试，但我相信以下

<md-optgroup label="pax">

应该是

<md-optgroup label="paxes">

Answer 2

如果我理解你的问题，你应该将角度应用和控制器定义为主要的div

＆＃13;

var app = angular.module('CoreWebApp', []);

app.controller('SelectedTextController', function($scope) {
  $scope.rooms = [1, 2, 3, 4, 5, 6, 7];
  $scope.selectedRoom;
  
  $scope.getSelectedText = function() {
    if ($scope.selectedRoom !== undefined) {
      return $scope.selectedRoom + " Room(s)";
    } else {
      return "Rooms";
    }
  };

  $scope.paxes = [1, 2, 3, 4, 5];
  $scope.selectedPax;
  
  $scope.getSelectedPersons = function() {
    if ($scope.selectedPax !== undefined) {
      return $scope.selectedPax;
    } else {
      return "Pax";
    }
  };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="CoreWebApp" ng-controller="SelectedTextController">

<div >
  <label>Rooms</label>
  <div layout-sm="column" layout-align="center end">
    <md-select md-no-resize ng-model="selectedRoom" md-selected-text="getSelectedText()">
      <md-optgroup label="rooms">
        <md-option ng-value="room" ng-repeat="room in rooms">{{room}} Rooms</md-option>
      </md-optgroup>
    </md-select>
  </div>
</div>

<div>
  <label>Pax</label>
  <div>
    <md-select ng-model="selectedPax" md-selected-text="getSelectedPersons()" aria-label="">
      <md-optgroup label="pax">
        <md-option ng-value="pax" ng-repeat="pax in paxes">{{pax}}</md-option>
      </md-optgroup>
    </md-select>
  </div>
</div>
  
  </div>

＆＃13;

Answer 3

你的代码很好。你没有发布你的整个代码，所以我不知道。只需确保HTML中包含ng-controller和ng-app属性。

这是使用ng-controller和ng-app的代码。此外，请确保包含所有必需的js和css库。

https://plnkr.co/edit/7gpRPGnF4Tr8oIxrUsmV?p=preview

<body ng-app="CoreWebApp" ng-controller="SelectedTextController">
<div>
  <label>Rooms</label>
  <div layout-sm="column" layout-align="center end">
    <md-select md-no-resize="" ng-model="selectedRoom" md-selected-text="getSelectedText()">
      <md-optgroup label="rooms">
        <md-option ng-value="room" ng-repeat="room in rooms">{{room}} Rooms</md-option>
      </md-optgroup>
    </md-select>
  </div>
</div>
<div>
  <label>Pax</label>
  <div>
    <md-select ng-model="selectedPax" md-selected-text="getSelectedPersons()" aria-label="">
      <md-optgroup label="pax">
        <md-option ng-value="pax" ng-repeat="pax in paxes">{{pax}}</md-option>
      </md-optgroup>
    </md-select>
  </div>
</div>

在AngularJS

3 个答案: