javascript - ng-repeat 中嵌套的 ng-options - 如何被选中？

Question

我有一个 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”设置为播放列表对象，但分配的播放列表仍未显示在选择中。我在这里缺少什么？

这是显示分配已设置的开发控制台的屏幕截图。

非常感谢任何帮助。谢谢。

Answer 1

虽然它不是最有效的代码，但您上面的 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/