在ng-repeat中嵌套的ng-选项—如何被选择?

时间:2022-11-25 17:14:34

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.

下面是开发控制台的屏幕截图,显示作业已设置。

在ng-repeat中嵌套的ng-选项—如何被选择?

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/