Angular Breeze一对多的复选框示例

时间:2014-01-31 09:05:04

标签: angularjs breeze

我使用Breeze推荐的一对多方法实现了域模型,并希望使用复选框方法分配这些关系。我正在使用Angular进行数据绑定,因此这将通过ngChecked指令。

我想知道是否有人尝试过类似的东西,并且能够在控制器和数据服务级别发布用于获取,创建和删除一对一关系的代码片段。

我即将开始这项要求,并乐意发布我的例子作为对我感兴趣的人的回答。

我已经扫描了Breeze样本,但找不到符合此要求的样本。

非常感谢!

为这个问题添加一些我的标记和脚本,因为我无法理解我是如何处理这个问题的。只是为了解释一下我的用例。我在页面顶部为用户提供了创建“频道”列表的功能。然后,用户还可以创建许多“业务单位”。对于每个业务部门,所有渠道都会显示,用户可以选择适用于每个业务部门的渠道。

...标记

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

并在我的控制器中......

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

我是否在模糊的方向上走向正确的方向?我还没有处理过保存到服务器的事件,我只是希望能够先填充我的列表: - )

2 个答案:

答案 0 :(得分:2)

我写过a plunker to demonstrate the many-to-many checkbox technique我之前描述过。我希望它能为您提供必要的见解。

答案 1 :(得分:0)

好的,这是我提出的解决方案。我真的很感激对我的方法的一些想法,以及它是否是最有效(甚至是正确的)方法。

...标记

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

并在我的控制器中......

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