Question

我正在使用bootstrap切换和处理函数中的选择。在我的应用程序中，将有许多切换组。我想删除重复的代码，并有一个公共服务/工厂，它将处理n切换次数的切换选择。

以下是我PLUNKER的链接。

您可能会问有什么需要处理选择？因为基于切换选择，DOM会有变化。某些字段可能会根据选择隐藏/显示。

请不要参考任何第三方库，帮助我理解逻辑，如何做到这一点。

这是我的代码：

HTML

  <div class="form-group" style="height: 50px;">
    <label class="control-label col-md-4 col-sm-4 col-xs-4">NUMERIC VALUE</label>

    <div class="col-md-6 col-sm-6 col-xs-6">
      <div class="btn-group">
        <button type="button" class="btn btn-toggle" value="111" ng-class="{active: vm.sharedService.numericValue === '111'}" ng-click="vm.selectNumericValue('111')">
          111
        </button>
        <button type="button" class="btn btn-toggle" value="222" ng-class="{active: vm.sharedService.numericValue === '222'}" ng-click="vm.selectNumericValue('222')">
          222
        </button>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-4 col-sm-4 col-xs-4">ALPHABETICAL VALUE</label>

    <div class="col-md-6 col-sm-6 col-xs-6">
      <div class="btn-group">
        <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.alphaValue === 'AAA'}" ng-click="vm.selectAlphaValue('AAA')">
          AAA
        </button>
        <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.alphaValue === 'BBB'}" ng-click="vm.selectAlphaValue('BBB')">
          BBB
        </button>
        <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.alphaValue === 'CCC'}" ng-click="vm.selectAlphaValue('CCC')">
          CCC
        </button>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-4 col-sm-4 col-xs-4">Mix VALUE</label>

    <div class="col-md-6 col-sm-6 col-xs-6">
      <div class="btn-group">
        <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'A1'}" ng-click="vm.selectMixValue('A1')">
          A1
        </button>
        <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'B1'}" ng-click="vm.selectMixValue('B1')">
          B1
        </button>
        <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'C1'}" ng-click="vm.selectMixValue('C1')">
          C1
        </button>
        <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'D1'}" ng-click="vm.selectMixValue('D1')">
          D1
        </button>
      </div>
    </div>
  </div>

JS

 function selectNumericValue(numValue) {
    vm.sharedService.numericValue = numValue;
  }


  function selectAlphaValue(alphaValue) {
    vm.sharedService.alphaValue = alphaValue;
  }

  function selectMixValue(mixValue) {
    vm.sharedService.mixValue = mixValue;
  }

Answer 1

我会使用指令。您可以根据常见的ng-model作业整理按钮组。

你说不要把你推荐给第三方图书馆，但事实是你所描述的内容已经完成了。如果你的目标是学习，你至少可以看到其他人是如何做到的，并按照自己的方式去做，不过为什么要重新发明轮子？

我建议你参考UI Bootstrap的按钮指令的源代码，特别是uib-btn-radio指令。这完全符合您的描述。

如何使用Angular概括引导切换选择

1 个答案: