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