在 AngularJS 中的一个控制器上使用多种方法答案

【问题标题】：Using multiple methods on one controller in AngularJS在 AngularJS 中的一个控制器上使用多种方法
【发布时间】：2016-09-13 03:42:22
【问题描述】：

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

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>

【问题讨论】：

标签： javascript asp.net angularjs angularjs-scope asp.net-core-1.0

【解决方案1】：

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

<md-optgroup label="pax">

应该是

<md-optgroup label="paxes">

【讨论】：

【解决方案2】：

如果我理解你的问题，你应该将你的角度应用程序和控制器定义到主 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>

【讨论】：

我把我的 ng-app 放到了 html 标签中，并且 div 中的控制器包含了 md-selects 但第二种方法仍然不起作用
在第二种方法的 if 条件下，您使用 !== 而不是这种使用 != 并检查
`!==`和!=有什么区别？

【解决方案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>

【讨论】：

我听从了你的建议，但还是不行:(
您看到 plunkr 工作正常吗？发布更多代码，因为可能有一个小错字或错误会阻止您的代码工作。