javascript - Selección angular dentro de una directiva ng-repeat: ¿cómo puedo acceder a los alcances de los niños?

angularjs angularjs-scope

Question

Tengo una fila de tabla ng-repeat -ed, dentro de la cual hay un par de select angulares:

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

El controlador es:

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

Ahora, sé que cuando se selecciona una de las selecciones, el objeto correspondiente se establece en la variable de ámbito ng-model ( $scope.selectedChannel o $scope.selectedDevice ), pero obviamente se establece en el ámbito correspondiente ng-repeat child .

¿Cómo puedo acceder a los ámbitos de los niños en el controlador? Quiero guardar todas las selecciones cuando el usuario presiona un botón, pero si trato de hacerlo en el controlador midiCtrl , no puedo acceder a los ámbitos para niños creados por ng-repeat .

Answer 1

Puede definir el objeto seleccionado en el controlador principal primero. Los objetos a los que enlaza datos siempre deben tener un punto para evitar problemas con la herencia prototípica, por lo que debe vincularse a algo como "selected.channel" en lugar de "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''},
];
});

Y actualice el HTML en consecuencia

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

Answer 2

El truco más simple es agregar los valores seleccionados al objeto de plugin actual, para que pueda obtener fácilmente los valores seleccionados y esos valores están ligados al objeto de plugin correcto de forma natural. No se introducirán otros objetos. Muy 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">

Demo de trabajo 1

Si quieres almacenarlo por separado, puedes hacer

<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
});
})

Demostración de trabajo 2