0
Итак, я выяснил, как реализовать ng-repeat, но не может понять способ цикла в течение лет, используя getFullYear для отображения в раскрывающемся списке правильно без жесткого кодирования. Ниже мой текущий код (с жестким кодированием), а также моя старая функция Javscript.Как мне получить список лет в моем выпадающем списке, без жесткого кодирования, для отображения и работы с моей кнопкой «Добавить»?
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>Вот моя старая функция, которая работала, когда я не использовал нг-повтор.
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);
};
Спасибо всем.
Я думаю, что это может ответить на ваш вопрос: http://stackoverflow.com/questions/12336897/how-to-loop-through-items-returned-by-a-function-with -ng-repeat – user7398648