angularjs 中未显示年份值

Question

我试图在 HTML 视图中显示年份值，但年份值根本不显示。虽然，我的其他值在条件未激活时显示（如信用卡），但当我激活它时，年份值未显示，而值来自控制器并显示在控制台中。

这是查看代码：-

<div class="col-xs-2 innerN" style="width: 14%;">   
                <select ng-disabled="page.creditcard.isDisabled" class="form-control innerN" placeholder="YYYY" name="ccExpYear" ng-model="page.expyear" required style="border-left:none">
                    <option value="XX" selected ng-if="page.creditcard.isDisabled">XX</option>
                    <option ng-repeat="year in page.yearList" value="{{year}}" ng-if="!page.creditcard.isDisabled">{{year}}</option>
                </select>
            </div>

这是控制器代码：-

$scope.page.monthList = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", ];
$scope.page.yearList = [];
var d = new Date();
var year = d.getFullYear();
//$scope.page.yearList.push(year);
$scope.page.expyear = year;
console.log("Pawan2", $scope.page.expyear);
for (var i = 0; i < 21; i++) {
    {
        $scope.page.yearList.push(year + i);
    };
}
$scope.years = $scope.page.yearList;
console.log("YearListPawan", $scope.page.yearList);
$scope.page.expmonth = "01";
$scope.monthList = "01";
// watcher
$scope.$watchGroup(['page.expmonth', 'page.expyear'], function(newValues, oldValues, scope) {
    //MM-YYYY
    if (typeof newValues[1] == "undefined" || typeof newValues[0] == "undefined") scope.authorize.creditCard
        .expirationDate = null;
    else $scope.authorize.creditCard.expirationDate = newValues[1] + "-" + newValues[0];
    console.log("Pawan", $scope.authorize.creditCard.expirationDate)
}, true);

我希望，我已经足够清楚地得到这个问题的答案了。 PS : THnx 提前寻求帮助。

Answer 1

你应该使用 ng-value 而不是 value:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.page = {};
  $scope.page.monthList = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", ];
  $scope.page.yearList = [];
  var d = new Date();
  var year = d.getFullYear();
  //$scope.page.yearList.push(year);
  $scope.page.expyear = year;
  console.log("Pawan2", $scope.page.expyear);
  for (var i = 0; i < 21; i++) {
    {
      $scope.page.yearList.push(year + i);
    };
  }
  $scope.years = $scope.page.yearList;
  
  $scope.authorize = {creditCard: {expirationDate: 'date'}};
  
  console.log("YearListPawan", $scope.page.yearList);
  $scope.page.expmonth = "01";
  $scope.monthList = "01";
  // watcher
  $scope.$watchGroup(['page.expmonth', 'page.expyear'], function(newValues, oldValues, scope) {
    //MM-YYYY
    if (typeof newValues[1] == "undefined" || typeof newValues[0] == "undefined")
      $scope.authorize.creditCard.expirationDate = null;
    else
      $scope.authorize.creditCard.expirationDate = newValues[1] + "-" + newValues[0];
    console.log("Pawan", $scope.authorize.creditCard.expirationDate)
  }, true);
});

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


<div ng-app="myApp" ng-controller="myCtrl">
  <div class="col-xs-2 innerN" style="width: 14%;">
    <select ng-disabled="page.creditcard.isDisabled" class="form-control innerN" placeholder="YYYY" name="ccExpYear" ng-model="page.expyear" required style="border-left:none">
      <option value="XX" selected ng-if="page.creditcard.isDisabled">XX</option>
      <option ng-repeat="year in page.yearList" ng-value="year" ng-if="!page.creditcard.isDisabled">{{year}}</option>
    </select>
  </div>
</div>

Answer 2

这是我应用到场景中的解决方案-

这里是控制器代码，稍作改动：-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.page = {};
$scope.page.monthList = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", ];
$scope.page.yearList = [];
var d = new Date();
var year = d.getFullYear();
var addYears = function () {
    var d = new Date();
    var year = d.getFullYear();
    $scope.page.yearList = [];
    var i = 0;
    for (i = 0; i < 40; i++) {
        $scope.page.yearList.push(year.toString());
        year++;
    }
}
addYears();
$scope.years = $scope.page.yearList;
$scope.page.expyear = d.getFullYear();
$scope.page.expmonth = "01";
$scope.monthList = "01";
// watcher
$scope.$watchGroup(['page.expmonth', 'page.expyear'], function(newValues, oldValues, scope) {
    //MM-YYYY
    if(typeof newValues[1] == "undefined" || typeof newValues[0] == "undefined")
        scope.authorize.creditCard.expirationDate = null;
    else
        $scope.authorize.creditCard.expirationDate = newValues[1] + "-" + newValues[0];
    console.log("Pawan", $scope.authorize.creditCard.expirationDate)
}, true);

这是查看代码：-

<!DOCTYPE html>
<html><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div class="col-xs-2 innerN" style="width: 14%;">   
                <select ng-disabled="page.creditcard.isDisabled" class="form-control innerN" placeholder="YYYY" name="ccExpYear" ng-model="page.expyear" required style="border-left:none">
                    <option value="XX" selected ng-if="page.creditcard.isDisabled">XX</option>
                    <option ng-repeat="year in page.yearList" value="{{year}}" ng-if="!page.creditcard.isDisabled">{{year}}</option>
                </select>
            </div>

希望这对其他人有所帮助。

angularjs 中未显示年份值

Year value is not showing in angularjs

angularjs

angularjs-ng-repeat