在AngularJS的一個控制器上使用多種方法

我需要一些幫助和建議。我想在一個控制器上使用兩種方法。第一種方法是顯示選定的房間，第二種方法是顯示選定的房間。但是，只有第一種方法有效，第二種md-select在第二種方法中不顯示數組。這是我的JS和HTML代碼片段：在AngularJS的一個控制器上使用多種方法

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>

來源

2016-09-13 Ryu Roble

我不能運行代碼來測試，但我相信下面

<md-optgroup label="pax">

應該

<md-optgroup label="paxes">

來源

2016-09-13 03:56:28

如果我理解你的問題，你應該定義你的角度應用程序和繼續輥到主分區

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>

來源

2016-09-13 04:11:28

我把我的NG-應用HTML標記，然後在包含MD-選擇，但股利控制器還是第二種方法不適用 –

在您若第二種方法條件你有使用！==而不是這個使用！=並檢查 –

'！=='和'！='有什麼區別？ –

你的代碼是正確的。你沒有發佈你的整個代碼，所以我不知道。只要確保你在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>

來源

2016-09-13 12:11:35

我按照你的建議，但它仍然不起作用:( –

你看到plunkr工作正常嗎？張貼更多的代碼，因爲可能有一個小的錯字或錯誤，阻止你的代碼工作。 –

在AngularJS的一個控制器上使用多種方法

回答

相關問題