ng-change和select標記的AngularJS問題

Question

我遇到一個奇怪的問題，即ng-change無法與ng-select一起正常工作。 我附上了一個小提琴，重現了這個問題。 選擇任何選項默認為“今年”選項。

<div ng-controller="MyCtrl">
        <select ng-model="selectedRange" ng-change="dateFilter()">
          <option value="week" selected>This week</option>
          <option value="month">This month</option>
          <option value="year">This year</option>
          <option value="custom">Custom</option>
        </select>
</div>

以上是我的看法。 下面是select標簽觸發的ng-change函數。

$scope.dateFilter = function () {
  $scope.customDate = false;
  var oneWeekAgo = new Date();

  if ($scope.selectedRange == 'week') {
    $scope.searchStartDate = new Date();
    $scope.searchStartDate.setDate(oneWeekAgo.getDate() - 7);
  }
  if ($scope.selectedRange = 'month') {
    $scope.searchStartDate = new Date();
    $scope.searchStartDate.setMonth(oneWeekAgo.getMonth() - 1);
  }
  if ($scope.selectedRange = 'year') {
    $scope.searchStartDate = new Date();
    $scope.searchStartDate.setYear(oneWeekAgo.getYear() - 1);
  }

  if ($scope.selectedRange == 'custom') {
    $scope.customDate = true;
  }
}

http://jsfiddle.net/G8S32/1087/

謝謝您的幫助

Answer 1

在月份，年份條件中，您缺少'=='運算符

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.dateFilter = function () {
        //alert("Hello");
      $scope.customDate = false;
      var oneWeekAgo = new Date();

      if ($scope.selectedRange == 'week') {
          alert("week");
        $scope.searchStartDate = new Date();
        $scope.searchStartDate.setDate(oneWeekAgo.getDate() - 7);
      }
      if ($scope.selectedRange == 'month') {
          alert("month");
        $scope.searchStartDate = new Date();
        $scope.searchStartDate.setMonth(oneWeekAgo.getMonth() - 1);
      }
      if ($scope.selectedRange == 'year') {
          alert("year");
        $scope.searchStartDate = new Date();
        $scope.searchStartDate.setYear(oneWeekAgo.getYear() - 1);
      }

      if ($scope.selectedRange == 'custom') {
          alert("custom");
        $scope.customDate = true;
      }
    }
}

Answer 2

您將=與==混淆了。

在您的代碼中， $scope.selectedRange始終設置為“ year”，表達式$scope.selectedRange = 'year'將是真實值，因此始終執行以下代碼：

$scope.searchStartDate = new Date();
$scope.searchStartDate.setYear(oneWeekAgo.getYear() - 1);

請將月份和年份塊的=更改為== ，然后解決問題。

Answer 3

您的Javascript應該如下所示：

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.dateFilter = function (selectedRangeVal) {
      $scope.customDate = false;
      var oneWeekAgo = new Date();

// I would make this a switch or function called like this: dateFns[selectedRangeVal]();

      if (selectedRangeVal == 'week') {
        $scope.searchStartDate = new Date();
        $scope.searchStartDate.setDate(oneWeekAgo.getDate() - 7);
      }
      if (selectedRangeVal = 'month') {
        $scope.searchStartDate = new Date();
        $scope.searchStartDate.setMonth(oneWeekAgo.getMonth() - 1);
      }
      if (selectedRangeVal = 'year') {
        $scope.searchStartDate = new Date();
        $scope.searchStartDate.setYear(oneWeekAgo.getYear() - 1);
      }

      if (selectedRangeVal == 'custom') {
        $scope.customDate = true;
      }
    }
}

而且您的標記幾乎保持不變，解決方案是添加{{selectedRange}}並將其傳遞給控制器​​dateFilter（selection）

<div ng-controller="MyCtrl">
            <select class="atom-offerFilter--filterDate atom-widget--header__select" style="width: 150px; font-family: ' Museo', sans-serif;" ng-model="selectedRange" ng-change="dateFilter(selectedRange)"> 



              <option value="week" selected>This week</option>
              <option value="month">This month</option>
              <option value="year">This year</option>
              <option value="custom">Custom</option>
            </select>
</div>

您無需比較$ scope val，而是將ng-change上的更改值傳遞給控制器​​函數dateFilter（selectedValue）。

另外請不要忘記==通常不是您想要進行比較的，而=永遠不是。 除非您希望使用強制類型內置的javascript，否則幾乎總是使用===。

您太親密了！ http://jsfiddle.net/geub5cxk/1/