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.
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">
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
});
})
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다