Question

HTML:
<head>
  <script src="calculator.js"></script>
</head>
<body>
    <input type="number" name="Input" value="" id="userInput" / >
    <input type="button" value="Go" onclick="calculate();" />
    <input type="number" name="Answer" id="userAnswer" />
</body>

JavaScript:

var input = document.getElementById("userInput");
var output = document.getElementById("userAnswer");
var answer;

function calculate(){
n = input.value;
if (n < 2){
  return 1;
} else {
  answer = calculate(n - 2) + calculate(n - 1);
  return answer;
}
output.value = answer;
}

＆＃34;数据肘节=＆＃34;按钮＆＃34; ＆＃34;标签不允许角度js正常工作，因为你可以在这个plnkr示例中看到..但如果我删除它的工作正常..

但我希望保持原样......

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

Answer 1

通过使用data-toggle="button"上的btn-group属性隐藏单选按钮，bootstrap不允许click事件向下传播到无线电输入。您可以通过向ng-click元素添加.btn绑定来抵消这种影响。

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

PS。您会注意到点击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

Bootstrap和Angular js之间的单选按钮冲突

2 个答案: