Bootstrap 和 Angular js 之間的單選按鈕沖突

Question

<!-- Container -->
<div class="container">

  <div class="row">
    <div class="col-lg-12">
      <div class="page-header text-center">
        <h2>Radio Button Conclict between Bootstrap And Angular</h2>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- With data-toggle -->
    <div class="col-lg-6">

      <div class="row">
        <h4 class="col-lg-12">
          This has data-toggle property
        </h4>
      </div>

      <div class="btn-group row" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="options" value="option1" />
          <span>Option 1</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="options" value="option2" />
          <span>Option 2</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="options" value="option3" />
          <span>Option 3</span>
        </label>
      </div>

      <div class="row">
        <div class="col-lg-6">
          <p>Model: {{selection | json}}</p>
        </div>
      </div>

    </div>
    <!--/ With data-toggle -->

    <!-- Without data-toggle -->
    <div class="col-lg-6">

      <div class="row">
        <h4 class="col-lg-12">
          This has NOT data-toggle property
        </h4>
      </div>

      <div class="btn-group row">
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option1" />
          <span>Option 1</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option2" />
          <span>Option 2</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option3" />
          <span>Option 3</span>
        </label>
      </div>

      <div class="row">
        <div class="col-lg-6">
          <p>Model: {{selection2 | json}}</p>
        </div>
      </div>

    </div>
    <!--/ Without data-toggle -->

  </div>

</div>
<!--/ Container -->

" data-toggle="buttons" " 標簽不允許 angular js 正常工作，正如你在這個 plnkr 示例中也看到的那樣......但如果我刪除它，那么它工作正常......

但我想保持原樣..

http://plnkr.co/edit/l36UgnR7kltphXdEQLCk?p=preview

Answer 1

通過使用btn-group上的data-toggle="button"屬性隱藏單選按鈕，引導程序不允許單擊事件向下傳播到單選輸入。 您可以通過向.btn元素添加ng-click綁定來抵消這種影響。

<div class="btn-group row" data-toggle="buttons">
    <label class="btn btn-primary" ng-click="selection = 'option1'">
      <input type="radio" data-ng-model="selection" name="options" value="option1" />
      <span>Option 1</span>
    </label>
    <label class="btn btn-primary" ng-click="selection = 'option2'">
      <input type="radio" data-ng-model="selection" name="options" value="option2" />
      <span>Option 2</span>
    </label>
    <label class="btn btn-primary" ng-click="selection = 'option3'">
      <input type="radio" data-ng-model="selection" name="options" value="option3" />
      <span>Option 3</span>
    </label>
</div>

附注。 您會注意到單擊頂部radio會影響底部radio的原因是因為它們具有相同的name屬性。 根據需要更改此設置，您會注意到每個組都正常/獨立於其他組工作

Answer 2

由於輸入的相同名稱，這正在發生。

  <div class="row">
    <div class="col-lg-12">
      <div class="page-header text-center">
        <h2>Radio Button Conclict between Bootstrap And Angular</h2>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- With data-toggle -->
    <div class="col-lg-6">

      <div class="row">
        <h4 class="col-lg-12">
          This has data-toggle property
        </h4>
      </div>

      <div class="btn-group row" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="group1" value="option1" />
          <span>Option 1</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="group1" value="option2" />
          <span>Option 2</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection" name="group1" value="option3" />
          <span>Option 3</span>
        </label>
      </div>

      <div class="row">
        <div class="col-lg-6">
          <p>Model: {{selection | json}}</p>
        </div>
      </div>

    </div>
    <!--/ With data-toggle -->

    <!-- Without data-toggle -->
    <div class="col-lg-6">

      <div class="row">
        <h4 class="col-lg-12">
          This has NOT data-toggle property
        </h4>
      </div>

      <div class="btn-group row">
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option1" />
          <span>Option 1</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option2" />
          <span>Option 2</span>
        </label>
        <label class="btn btn-primary">
          <input type="radio" data-ng-model="selection2" name="options" value="option3" />
          <span>Option 3</span>
        </label>
      </div>

      <div class="row">
        <div class="col-lg-6">
          <p>Model: {{selection2 | json}}</p>
        </div>
      </div>

    </div>
    <!--/ Without data-toggle -->

  </div>

</div>
<!--/ Container -->

http://plnkr.co/edit/chzO8o7gx2STGkyQ8SNK?p=preview