How would I get a list of years in my drop down list, without hard coding it, to display and function with my "Add" button?

Question

So I have figured out how to implement ng-repeat, but cannot figure out a way to loop through years using getFullYear to display in the drop down properly without hard coding. Below is my current code (with hard coding), as well as the my old Javscript function.

var carsApp = angular.module('carsApp', []);
    
    carsApp.controller('carController', function ($scope) {
      $scope.cars = [];
      
      function hasDuplicates(newCar){
         var returnVal = false;
         angular.forEach($scope.cars, function(car, key){
            if (angular.equals(car, newCar))
            {
              returnVal = true;
            }
          });
         return returnVal;
      };


      $scope.add = function () {
          
          var newCar = {
            make: $scope.make,
            model: $scope.model,
            numDoors: $scope.numDoors,
            yearBuilt: $scope.yearBuilt
          };
     
          if (hasDuplicates(newCar)) {

              alert("Car already exists");

          } else {
           
              $scope.cars.push(newCar);
              $scope.make = null;
              $scope.model = null;
              $scope.numDoors = null;
              $scope.yearBuilt = null;
          }
          
      };      


      $scope.removeRow = function (deleteRow) {
         $scope.cars.splice(deleteRow, 1);
      };

      $scope.rowClick = function(car){
          $scope.make= car.make;
          $scope.model= car.model;
          $scope.numDoors= car.numDoors;
          $scope.yearBuilt= car.yearBuilt;
      };

      $scope.data = {
        model: null,
        availableYears: [
          {id: '1960'},
          {id: '1961'},
          {id: '1962'},
          {id: '1963'},
          {id: '1964'},
          {id: '1965'},
          {id: '1966'},
          {id: '1967'},
          {id: '1968'},
          {id: '1969'},
          {id: '1970'},
          {id: '1971'},
          {id: '1972'},
          {id: '1973'},
          {id: '1974'},
          {id: '1975'},
          {id: '1976'}
        ]
      };
          
    });
  </script>
</head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="carsApp">
<head>
  <title>Angular Test</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" type="text/css" />

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js" type="text/javascript"></script>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

  <style>


  </style>

<body ng-controller="carController">
<form class="form-inline">
  <div class="form-group">
    <label for="make">Make</label>
    <input type="text" class="form-control" id="make" placeholder="Make" ng-model="make">
  </div>
  <div class="form-group">
    <label for="numDoors">Number of Doors</label>
    <input type="text" class="form-control" id="numDoors" placeholder="Number of Doors" ng-model="numDoors">
  </div>
</form>
<form class="form-inline">
  <div class="form-group">
    <label for="model">Model</label>
    <input type="text" class="form-control" id="model" placeholder="Model" ng-model="model">
  </div>
  <div class="form-group">
    <label for="yearBuilt">Year Built</label>
    <select name="dateYearBuilt" id="dateYearBuilt" ng-model="yearBuilt">
      <option ng-repeat="years in data.availableYears" value="{{years.id}}">{{years.id}}</option>
    </select>
  </form>
  <button ng-click="add()" class="btn btn-primary">Add</button>
</div>
</form>
  <table class="table table-striped table-bordered">
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Number of Doors</th>
            <th>Year Built</th>
            <th>Action</th>
        </tr>
        <tr ng-repeat="car in cars" ng-click="rowClick(car)">
            <td>{{car.make}}</td>
            <td>{{car.model}}</td>
            <td>{{car.numDoors}}</td>
            <td>{{car.yearBuilt}}</td>
            <td><input type="button" value="Remove" class="btn btn-danger" data-ng-click="removeRow($index)"/></td>
        </tr>
  </table>

Here is my old function that worked when I was not using ng-repeat.

 var max = new Date().getFullYear(),
    min = max - 57,
    max = max + 1,
    select = document.getElementById('dateYearBuilt');

  for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
  };

Thank you all.

I think this might answer your question: http://stackoverflow.com/questions/12336897/how-to-loop-through-items-returned-by-a-function-with-ng-repeat — user7398648, Feb 22 '17 at 16:03

score 4 · Accepted Answer · answered Feb 22 '17 at 16:09

4

You need to create the data inside for loop.

var max = new Date().getFullYear(),
min = max - 57,
max = max + 1;

for(var i=min; i<=max; i++){
$scope.data.availableYears.push({"id":i});
}

https://jsfiddle.net/pmxhdLnf/

answered Feb 22 '17 at 16:09

Gowthaman

1,262
1
9
15

How would I get a list of years in my drop down list, without hard coding it, to display and function with my "Add" button?

1 Answers1