javascript - ng-repeat 指令中的 Angular 选择 : how can I access the children scopes?

Question

我有一个 ng-repeat-ed 表格行，里面有一对 Angular select:

    <div ng-controller="midiCtrl" id="midi-ctrl">
        [...]

                <tr ng-repeat="plugin in plugins">
                    <td><strong>{{plugin.name}}</strong></td>
                    <td>
                       <select class="span1" ng-model="selectedChannel" ng-options="item.ID as item.Title for item in channels">
                    </td>
                    <td>
                        <select class="span2" ng-model="selectedDevice" ng-options="item.ID as item.Title for item in devices">
                    </td>
                </tr>

        [...]
    </div>

Controller 是:

    app.controller('midiCtrl', function ($scope, pluginDisplayedWindows) {

        $scope.plugins = pluginDisplayedWindows.pluginsDisplayed; // An object          

        $scope.channels = [
           {ID: 'all', Title: 'All'},
           {ID: '0', Title: '1'},
           {ID: '1', Title: '2'},
           {ID: '2', Title: '3'}
        ];

        $scope.devices = [
           {ID: '0', Title: 'Device A'},
           {ID: '1', Title: 'Device B'},
           {ID: '2', Title: 'Device C'},
           {ID: '3', Title: 'Device D'},
        ];

    });

现在，我知道当其中一个选择被选中时，相应的对象被设置在 ng-model 范围变量($scope.selectedChannel 或 $scope.selectedDevice)，但显然它是在相应的 ng-repeat 子作用域中设置的。

如何在 Controller 中访问子作用域？我想在用户按下按钮时保存所有选择，但如果我尝试在 midiCtrl Controller 中执行此操作，我将无法访问 ng-repeat 创建的子范围。

Answer 1

最简单的技巧是将选择的值添加到当前的 plugin 对象，这样你就可以很容易地获得选择的值并且这些值自然地绑定(bind)到正确的 plugin 对象.不再介绍其他对象。非常简单。

<select class="span1" ng-model="plugin.selectedChannel" ng-options="item.ID as item.Title for item in channels">
<select class="span2" ng-model="plugin.selectedDevice" ng-options="item.ID as item.Title for item in devices">

Working Demo 1

如果你想单独存放，你可以这样做

<select class="span1" ng-model="selected[$index].selectedChannel" ng-options="item.ID as item.Title for item in channels" />
<select class="span2" ng-model="selected[$index].selectedDevice" ng-options="item.ID as item.Title for item in devices" />

$scope.selected = [];
angular.forEach($scope.plugins, function (a) {
    $scope.selected.push({
        selectedChannel: undefined,
        selectedDevice: undefined
    });
})

Working Demo 2