我的项目中出现“编辑”选项有问题。它应该与“添加”选项相同，但也可以从所选元素加载值并保存更改。
我想我应该在（编辑）函数中尝试进入元素（系列，索引）。
这是我的calendar.html：
<!DOCTYPE html>
<html lang="pl" ng-app="calendar">
<head>
<title>Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller='CalendarController as calCtrl'>
<div class="table">
<div class="row" ng-repeat='days in calCtrl.series'>
<div class="cell" ng-repeat='day in days'>
<h4>{{ $index + 1 }}</h4>
<img ng-src="{{ day.imgUrl }}">
<h5>{{ day.date }}</h5>
<span>{{ day.description }}</span>
<p ng-show='day.evaluated'><img ng-repeat="x in calCtrl.range(day.stars)" ng-src='img/star.png'></p>
<a href="#openModal" ng-click='calCtrl.edit(days, $index)'>Edit</a>
</div>
<div class="cell">
<ul>
<li>
<a href="#openModal" ng-click='calCtrl.setSeriesNo($index)'>Add note</a>
</li>
<li>
<a ng-click='calCtrl.addSeries(days)'>Add series</a>
</li>
</ul>
</div>
</div>
</div>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Add new observation</h2>
<form action='#close' ng-controller='FormController as formCtrl'
ng-submit='formCtrl.add(calCtrl.getSeries())'>
<div class='form-field'>
<span class='sp'>Choose picture:</span><br />
<div class="selection-wrapper"
ng-controller='DropDownListController as ddList'>
<div class="selected-item-box" ng-click='ddList.toggle()'>
<span class="dropdown-icon"></span>
<ul class="items-list">
<li>
<img ng-src="{{ record.imgUrl }}"/>
</li>
</ul>
</div>
<div class="list" ng-show='ddList.clicked'>
<ul class="items-list">
<li ng-click='ddList.select($index)'
ng-repeat='item in ddList.itemsList'>
<img ng-src="{{ item }}" />
</li>
</ul>
</div>
</div>
</div>
<div class='form-field'>
<span class='sp'>Vote:</span>
<input type='checkbox' ng-model='record.evaluated'>
</div>
<div class='form-field' ng-show='record.evaluated'>
<span class='sp'>Voted:</span>
<input type='radio' ng-repeat='x in calCtrl.range(5)'
ng-model='record.stars' value='{{x}}'>
</div>
<div class='form-field'>
<span class='sp'>Description (optional):</span><br />
<textarea ng-model='record.description'></textarea>
</div>
<div class='form-field'>
<input type='submit' value='Add observation'>
</div>
</form>
</div>
</div>
</body>
</html>
和app.js：
(function() {
var app = angular.module('calendar', []);
app.controller('CalendarController', function() {
this.series = model;
this.seriesNo = -1;
this.setSeriesNo = function(numb) {
this.seriesNo = numb;
};
this.addSeries = function(object) {
var idx = this.series.indexOf(object) + 1;
this.series.splice(idx, 0, []);
};
this.range = function(range) {
var arr = [];
for (var i = 0; i < range; i++) {
arr += i+1;
}
return arr;
};
this.getSeries = function() {
return this.series[this.seriesNo];
};
this.edit = function(series, index) {
console.log("edit");
};
});
app.controller('FormController', ['$scope', function($scope) {
$scope.record = {
stars: 0,
imgUrl: 'img/smile0.png'
};
var getDate = function() {
d = new Date();
day = d.getDate();
mth = d.getMonth()+1;
year = d.getFullYear();
day = (day > 9) ? day : '0'+day;
mth = (mth > 9) ? mth : '0'+mth;
return day + '.' + mth + '.'+ year;
}
this.add = function(series) {
$scope.record.date = getDate();
series.push($scope.record);
$scope.record = {
stars: 0,
imgUrl: 'img/smile0.png'
};
};
}]);
app.controller('DropDownListController', ['$scope', function($scope) {
this.clicked = false;
this.itemsList = [];
for (var i = 1; i <= 4; i++)
this.itemsList.push('img/smile'+ i +'.png');
this.toggle = function() {
this.clicked = !this.clicked;
};
this.select = function(id) {
this.clicked = false;
$scope.record.imgUrl = this.itemsList[id];
};
}]);
var model = [
[ // pojedyncza seria
{ // pojedynczy obrazek dnia
"imgUrl": 'img/smile1.png',
"date": '12.04.2014',
"description": '',
"stars": 3,
"evaluated": true
},
{
"imgUrl": 'img/smile2.png',
"date": '12.04.2014',
"description": '',
"stars": 3,
"evaluated": true
},
{
"imgUrl": 'img/smile3.png',
"date": '12.04.2014',
"description": '',
"stars": 3,
"evaluated": true
}
],
[
{
"imgUrl": 'img/smile4.png',
"date": '12.04.2014',
"description": '',
"stars": 3,
"evaluated": true
},
{
"imgUrl": 'img/smile2.png',
"date": '12.04.2014',
"description": '',
"stars": 3,
"evaluated": true
}
]
];
})();