3

ng-repeat-ed テーブル行があり、その中には一対の angular がありますselect:

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

    });

$scope.selectedChannelこれで、selects の 1 つが選択されると、対応するオブジェクトが ng-model スコープ変数 (または$scope.selectedDevice) に設定されることがわかりましたが、明らかに対応する ng-repeat 子スコープに設定されます。

コントローラーで子スコープにアクセスするにはどうすればよいですか? ユーザーがボタンを押したときにすべての選択を保存したいのですが、midiCtrlコントローラーでそれを実行しようとすると、によって作成された子スコープにアクセスできませんng-repeat。

4

2 に答える 2

3

最も簡単な方法は、選択した値を現在のpluginオブジェクトに追加することです。これにより、選択した値を簡単に取得でき、それらの値が正しいpluginオブジェクトに自然にバインドされます。他のオブジェクトは導入されません。とてもシンプルです。

<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

別々に保管したい場合は、

<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

最初に親コントローラで選択したオブジェクトを定義できます。データバインドするオブジェクトには、プロトタイプの継承の問題を回避するために、常に「ドットを含める」必要があるため、「selectedChannel」ではなく「selected.channel」などにバインドする必要があります。

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 に答える