Angular Breeze one-many-one example with checkbox - angularjs

Question

I have implemented domain models using Breeze's recommended one-many-one approach, and would like to assign these relationship using a checkbox approach. I'm using Angular for my data-binding, so this would be via the ngChecked directive.
I was wondering if anyone has attempted something similar and is able to post code snippets for getting, creating and deleting the one-many-one relationship, both at a controller and data service level.
I'm about to start on the requirement, and will gladly post my example as response to my question for those interested.
I've scanned through the Breeze samples, but couldn't find one fulfilling this requirement.
Many thanks!
Adding on some of my markup and scripts for this question, as I just cannot make sense of how I'm meant to approach this. Just to explain my use-case a bit. I provide users the capability at the top ofa page to create a list of "channels". Users can then also create a number of "business units". For each business unit, all channels get displayed and users can select which channels apply for each business unit.
Markup...
...
<div class="form-group"> /* portion of markup for adding channel */
<label class="control-label">New Interaction Channel</label>
<input class="form-control" placeholder="Channel Name..." data-ng-model="vm.newChannel.name" />
</div>
<div class="form-group">
<button class="btn btn-primary" data-ng-disabled="!vm.newChannel.name"
data-ng-click="vm.addChannel(vm.newChannel, $parent.vm.dboardConfig)">
Add Channel</button>
....
<accordion>
<accordion-group data-ng-repeat="bu in vm.busUnits"> /* business units listed in accordion groups */
<accordion-heading>
{{bu.name}}
...
</accordion-heading>
<h5>Channels</h5>
<div class="well well-sm panel-body">
/* this is where I start getting stuck. */
/* just not sure how to allocate the item viewmodel from */
/* Ward's example in my scenario */
<div data-ng-repeat="buc in bu.buChannels">
<div class="col-md-6">
<input type="checkbox" data-ng-checked="?????"
data-ng-model="buc.isSelected"/>
{{buc.name}}
</div>
...
and in my controller...
function getBusUnits() {
...
.then(function(data){
vm.busUnits = data;
vm.busUnits.forEach(function(bu){
getBusUnitChannels(bu);
});
});
}
function getBusUnitChannels(busUnit) {
datacontextSvc.dboardConfigs.getBusUnitChannelsById(busUnit.id)
.then(function (data) {
busUnit.busUnitChannelList = data;
});
busUnit.buChannels = [];
vm.channels.forEach(function (channel) {
busUnit.buChannels.push(channel);
// how do I assign the isSelected for each buChannel?
// how do I associate each buChannel with the BusUnitChannel obtained via breeze?
});
Am I going even vaguely in the right direction? I haven't event dealt with saving back to the server yet, I'd just like to be able to populate my lists first :-)

Answer 1

I've written a plunker to demonstrate the many-to-many checkbox technique I described previously. I'm hopeful it provides the essential insights for your case.

Answer 2

Ok, this is the solution I've come up with. I'd really appreciate some thoughts on my approach and whether or not its the most efficient (or even correct) approach..
Markup...
...
<div class="form-group"> /* portion of markup for adding channel */
<label class="control-label">New Interaction Channel</label>
<input class="form-control" placeholder="Channel Name..." data-ng-model="vm.newChannel.name" />
</div>
<div class="form-group">
<button class="btn btn-primary" data-ng-disabled="!vm.newChannel.name"
data-ng-click="vm.addChannel(vm.newChannel, $parent.vm.dboardConfig)">
Add Channel</button>
....
<accordion>
<accordion-group data-ng-repeat="bu in vm.busUnits"> /* business units listed in accordion groups */
<accordion-heading>
{{bu.name}}
...
</accordion-heading>
<h5>Channels</h5>
<div class="well well-sm panel-body">
<div data-ng-repeat="buc in bu.buChannels">
<div class="col-md-6">
<input type="checkbox" data-ng-model="buc.isSelected"/>
{{buc.name}}
</div>
...
and in my controller...
function getBusUnits() {
...
.then(function(data){
vm.busUnits = data;
vm.busUnits.forEach(function(bu){
getBusUnitChannels(bu);
});
});
}
function getBusUnitChannels(busUnit) {
datacontextSvc.dboardConfigs.getBusUnitChannelsById(busUnit.id)
.then(function (data) {
busUnit.busUnitChannelsList = data;
busUnit.buChannels = [];
vm.channels.forEach(function (channel) {
busUnit.buChannels.push(channel);
});
busUnit.busUnitChannelsList.forEach(function (buc) {
busUnit.buChannels.forEach(function (buCh) {
if (buc.channelId === buCh.id) {
buCh.buChannel = buc;
buCh.isSelected = true;
} else {
buCh.isSelected = false;
}
});
});
});
}