Question

如何在单独的<label>中将<input>与其<div>分开，但仍将它们链接在一起？

我有一个输入和一个标签，它们在同一个div中，功能正常。如果我将输入移动到同级div（在bootstrap的上下文中是兄弟），则切换功能不起作用：

  <div ng-repeat="uniqJokeType in uniqJokeTypes">
    <div class="row">
      <div class="col-md-7 col-md-offset-1">          
        <div class="type-filter-button" ng-class="jokeCssClasses(uniqJokeType)" ng-click="jokeTypeClick(uniqJokeType)">
          <label ng-bind="uniqJokeType"></label>
          <input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked />
        </div>
      </div>
      <div class="col-md-3">          
        <!-- I want to move the <input> here, but it does not work when placed here -->
      </div>
    </div>
  </div>

此外，这更像是一个HTML上下文问题，还是一个有角度的（可能是作用域？）问题？

Answer 1

只需在for上添加label属性，在id上添加input：

<label ng-bind="uniqJokeType" for="myInput"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked id="myInput" />

在div之间将输入与其标签分开：AngularJS

1 个答案: