在AngularJS中单击按钮更改选定的值答案

【问题标题】：Change selected value on button click in AngularJS在AngularJS中单击按钮更改选定的值
【发布时间】：2019-09-10 15:37:42
【问题描述】：

我正在尝试通过单击按钮更改选择框中的值。我有一个包含所有月份的选择框，当我单击“上个月”按钮时，我想将所选值更改为上个月，但我现在无法正常工作。它只改变一次

这是我的 HTML：

<select name="months" ng-model="monthFromSelector" ng-change="getSelectVal('monthFromSelector')">
   <option ng-repeat="month in months" value="{{month}}">{{month}}</option>
</select>

<button ng-click="prevMonth()">Vorige maand</button>

还有我的控制器：

$scope.months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"];

var now = new Date();
var thisMonth = $scope.months[now.getMonth()];

$scope.monthFromSelector = thisMonth;

$scope.prevMonth = function() {
    thisMonth = $scope.months[now.getMonth() -1]
    $scope.monthFromSelector = thisMonth;
    console.log(thisMonth)
  }

【问题讨论】：

标签： html angularjs drop-down-menu

【解决方案1】：

发生这种情况是因为您总是从当前获得上个月：

thisMonth = $scope.months[now.getMonth() -1]

你需要从选中的那个中获取上个月：

$scope.prevMonth = function() {
    let selectedIndex = $scope.months.indexOf($scope.monthFromSelector);
    if(selectedIndex > 0) {
        $scope.monthFromSelector = $scope.months[selectedIndex - 1];
     }
}

查看工作演示：DEMO

【讨论】：

【解决方案2】：

我想你已经复制粘贴了这一行

thisMonth = $scope.months[now.getMonth() -1]

这条线每次都是当前月份。

用下面的代码替换这一行就可以了

thisMonth = $scope.months[$scope.months.indexOf($scope.monthFromSelector) - 1]

查看工作示例：

angular.module('myapp', [])
  .controller('myctrlr', ['$scope', function($scope) {
    $scope.message = 'message';

    $scope.months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"];

    var now = new Date();
    var thisMonth = $scope.months[now.getMonth()];

    $scope.monthFromSelector = thisMonth;

    $scope.prevMonth = function() {
      thisMonth = $scope.months[$scope.months.indexOf($scope.monthFromSelector) - 1]
      $scope.monthFromSelector = thisMonth;
      console.log(thisMonth)
    }
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myapp">
  <div ng-controller="myctrlr">

    <select name="months" ng-model="monthFromSelector" ng-change="getSelectVal('monthFromSelector')">
      <option ng-repeat="month in months" value="{{month}}">{{month}}</option>
    </select>

    <button ng-click="prevMonth()">Vorige maand</button>


  </div>
</div>

【讨论】：