I have a ng-repeat that lists parts of the day for schedules to go into. For each line, I need to show the available playlists.
我有一个ng-repeat,列出了当天的日程安排。对于每行,我需要显示可用的播放列表。
The issue that I'm having is how to match the two up so that we show the currently selected item in the drop down.
我遇到的问题是如何将这两个项匹配起来,以便在下拉菜单中显示当前选中的项。
<div ng-repeat="daypart in dayparts track by $index" class="content_dayparts">
<div class="info_col_1">{{daypart.name}}</div>
<div class="info_col_2">
<select ng-model="daypart.assignment"
ng-options="p.id as p.name for p in playlists"
ng-change="assignPlaylist($index, daypart.id)">
</select></div>
When the "dayparts" change, the following function fires:
当“dayparts”发生更改时,以下函数将触发:
$scope.checkPlaylistAssignment = function () {
// So... We need to loop over all playlists, get their daypartId and store what it matches.
angular.forEach($scope.playlists, function(v,i) {
angular.forEach($scope.dayparts, function (vb, ib) {
if ($scope.playlists[i].daypartId == $scope.dayparts[ib].id) {
console.log("We have a match: "+$scope.playlists[i].daypartId+" Daypart Id is: "+$scope.dayparts[ib].id);
$scope.dayparts[ib].assignment = $scope.playlists[i];
} else {
console.log("Assigned Playlist is: "+$scope.playlists[i].daypartId+" Daypart Id is: "+$scope.dayparts[ib].id);
}
});
});
console.log($scope.dayparts);
}
"daypart.assignment" is set to the playlist object, but still, the assigned playlist does not show in the select. What am I missing here?
”时段。赋值"被设置为播放列表对象,但是仍然,分配的播放列表在选择中不显示。我错过了什么?
Here is a screenshot of the dev console showing that the assignment IS set.
下面是开发控制台的屏幕截图,显示作业已设置。
Any help is very much appreciated. Thanks.
非常感谢您的帮助。谢谢。
1 个解决方案
#1
2
Although it's not the most efficient code, the code you have above for checkPlaylistAssignment
should work based on solely what you have provided in this question.
虽然这不是最有效的代码,但是上面用于checkPlaylistAssignment的代码应该只基于您在这个问题中提供的内容。
I checked the jsfiddle that you sent and I created the following checkPlaylistAssignment
which will assign the right assignment object to each daypart object when it is run.
我检查了您发送的jsfiddle,我创建了下面的checkPlaylistAssignment,它将在运行时为每个daypart对象分配正确的赋值对象。
What I'm doing is first I index the playlists by their id and then I go through each daypart and assign the right playlist object. I first created an index so that you avoid having to loop through your playlist for each single dayparts object.
我要做的是首先根据播放列表的id进行索引,然后遍历每个daypart并分配正确的播放列表对象。我首先创建了一个索引,这样您就不必为每个daypart对象遍历播放列表。
$scope.checkPlaylistAssignment = function () {
var playlistIndexedById = {};
angular.forEach($scope.playlists, function (playlist){
playlistIndexedById[playlist.id] = playlist;
});
angular.forEach($scope.dayparts, function(daypart) {
var curr = daypart.assignment;
daypart.assignment = playlistIndexedById[curr.id];
});
console.log('playlistIndexedById',playlistIndexedById);
};
$scope.checkPlaylistAssignment();
I also created an updated fiddle that shows you that it works: http://jsfiddle.net/95jufwz9/12/
我还创建了一个更新的小提琴,显示它可以工作:http://jsfiddle.net/95jufwz9/12/
#1
2
Although it's not the most efficient code, the code you have above for checkPlaylistAssignment
should work based on solely what you have provided in this question.
虽然这不是最有效的代码,但是上面用于checkPlaylistAssignment的代码应该只基于您在这个问题中提供的内容。
I checked the jsfiddle that you sent and I created the following checkPlaylistAssignment
which will assign the right assignment object to each daypart object when it is run.
我检查了您发送的jsfiddle,我创建了下面的checkPlaylistAssignment,它将在运行时为每个daypart对象分配正确的赋值对象。
What I'm doing is first I index the playlists by their id and then I go through each daypart and assign the right playlist object. I first created an index so that you avoid having to loop through your playlist for each single dayparts object.
我要做的是首先根据播放列表的id进行索引,然后遍历每个daypart并分配正确的播放列表对象。我首先创建了一个索引,这样您就不必为每个daypart对象遍历播放列表。
$scope.checkPlaylistAssignment = function () {
var playlistIndexedById = {};
angular.forEach($scope.playlists, function (playlist){
playlistIndexedById[playlist.id] = playlist;
});
angular.forEach($scope.dayparts, function(daypart) {
var curr = daypart.assignment;
daypart.assignment = playlistIndexedById[curr.id];
});
console.log('playlistIndexedById',playlistIndexedById);
};
$scope.checkPlaylistAssignment();
I also created an updated fiddle that shows you that it works: http://jsfiddle.net/95jufwz9/12/
我还创建了一个更新的小提琴,显示它可以工作:http://jsfiddle.net/95jufwz9/12/