我有一个 ng-repeat,列出了一天中要进入的时间表的部分时间。对于每一行,我需要显示可用的播放列表。
我遇到的问题是如何将两者匹配,以便我们在下拉列表中显示当前选定的项目。
<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>
当“时段”更改时,将触发以下函数:
$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”已设置为播放列表对象,但分配的播放列表仍然不会显示在选择中。我在这里缺少什么?
这是开发控制台的屏幕截图,显示分配已设置。
非常感谢任何帮助。谢谢。
最佳答案
虽然这不是最有效的代码,但上面的 checkPlaylistAssignment
代码应该仅基于您在此问题中提供的内容来工作。
我检查了您发送的 jsfiddle,并创建了以下 checkPlaylistAssignment
,它将在运行时将正确的分配对象分配给每个时段对象。
我所做的是首先按播放列表的 ID 对播放列表进行索引,然后遍历每个时段并分配正确的播放列表对象。我首先创建了一个索引,这样您就不必为每个时段对象循环播放列表。
$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();
我还创建了一个更新的 fiddle ,向您展示它的工作原理:http://jsfiddle.net/95jufwz9/12/
关于javascript - ng-repeat 中嵌套 ng-options - 如何被选中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26613236/