javascript - Angular select within a ng-repeat directive: how can I access the children scopes? - Stack Overflow

admin管理员组

文章数量:1391000

I've got an ng-repeat-ed table row, inside wich are a pair of 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>

The controller is:

    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.selectedChannel or $scope.selectedDevice), but obviously it is set in the corresponding ng-repeat child scope.

How can I access the children scopes, in the controller? I want to save all the selections when the user presses a button, but if I try to do that in the midiCtrl controller, I can't access to the children scopes created by ng-repeat.

I've got an ng-repeat-ed table row, inside wich are a pair of 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>

The controller is:

    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.selectedChannel or $scope.selectedDevice), but obviously it is set in the corresponding ng-repeat child scope.

How can I access the children scopes, in the controller? I want to save all the selections when the user presses a button, but if I try to do that in the midiCtrl controller, I can't access to the children scopes created by ng-repeat.

• javascript
• angularjs
• angularjs-scope
• angularjs-ng-repeat
• angularjs-select2

Share Improve this question Follow asked Sep 6, 2013 at 16:44 janesconferencejanesconference 6,48399 gold badges5858 silver badges7474 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

You can define the selected object in the parent controller first. Objects you data-bind should always "have a dot" in them to avoid issues with prototypical inheritance, so you should bind to something like "selected.channel" rather than "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'},
];

});

And update the HTML accordingly

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

本文标签： javascriptAngular select within a ngrepeat directive how can I access the children scopesStack Overflow