3

我有一个ng-repeat-ed 表格行，里面有一对 angular selects：

    <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>

控制器是：

    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'},
        ];

    });

Now, I know that when one of the selects is selected, the corresponding object is set on the ng-model scope variable ( $scope.selectedChannelor $scope.selectedDevice), but obviously it is set in the corresponding ng-repeat child scope .

如何在控制器中访问子范围？我想在用户按下按钮时保存所有选择，但是如果我尝试在midiCtrl控制器中执行此操作，我将无法访问由ng-repeat.

4

2 回答 2

3

The simplest trick is to add the selected values to current plugin object, so you can easily get the selected values and those values are bound to the correct plugin object naturally. No other objects will be introduced. Very simple.

<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

If you want store it separately, you can do

<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

于 2013-09-06T16:52:42.473 回答
2

您可以先在父控制器中定义所选对象。你数据绑定的对象应该总是“有一个点”以避免原型继承问题，所以你应该绑定到类似“selected.channel”而不是“selectedChannel”的东西

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

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


$scope.selected = {};
$scope.selected.channel = {};
$scope.selected.device = {};

$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'},
];

});

并相应地更新 HTML

   <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="selected.channel" ng-options="item.ID as item.Title for item in channels">
                </td>
                <td>
                    <select class="span2" ng-model="selected.device" ng-options="item.ID as item.Title for item in devices">
                </td>
            </tr>

    [...]
</div>
于 2013-09-06T16:50:45.520 回答