Verwenden mehrerer Methoden auf einem Controller in AngularJS

Question

Bitte ich brauche einige Hilfe und Beratung. Ich möchte zwei Methoden auf einem Controller verwenden. Die erste Methode besteht darin, ausgewählte Räume anzuzeigen, und die zweite Methode besteht darin, das ausgewählte Pax anzuzeigen. Allerdings funktioniert nur die erste Methode, das zweite md-select zeigt das Array in der zweiten Methode nicht an. Hier ist meine js und HTML-Code-Schnipsel:

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

ich nicht, Ihren Code ausführen können, um zu testen, aber ich glaube, die folgende

<md-optgroup label="pax"> 

sollte

<md-optgroup label="paxes"> 

Answer 2

Wenn ich Ihre Frage verstanden habe, sollten Sie Ihre eckige App und cont Walze auf die Haupt div

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"; 
 
    } 
 
    }; 
 

 
});

<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>

Answer 3

Der Code ist in Ordnung. Sie haben Ihren gesamten Code nicht veröffentlicht, daher kann ich es nicht sagen. Stellen Sie nur sicher, dass Sie ng-controller- und ng-app-Attribute im HTML-Code haben.

Hier ist Ihr Code mit ng-Controller und ng-app. Stellen Sie außerdem sicher, dass alle notwendigen js und css Bibliotheken enthalten sind.

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>