Bootstrap切换插件 - 使用Angular时复选框不切换

时间:2015-01-22 19:07:11

标签: javascript jquery html angularjs twitter-bootstrap

我使用Bootstrap Toggle插件将我的复选框更改为切换开关。我也使用AngularJS。当我设置选中的值时,它会切换到正常。但是当我不这样做时,它就不会切换。您可以在我的结果链接中看到复选框已选中,但它们没有切换。有谁知道为什么它没有使用Angular绑定?

HTML:

<div class="form-group">
     <label class="col-sm-7 control-label">
        <span>Working Toggle </span>
    </label>
    <div class="col-sm-5">
        <input id="toggle-one" checked type="checkbox">
    </div>
</div>
    <div class="form-group">
      <label class="col-sm-7 control-label">
          <span>Color Review Check</span>
      </label>
      <div class="col-sm-5">
        <input type="checkbox" class="pull-right" ng-model="colorReview" >
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-7 control-label">
          <span>Type Review Check</span>
      </label>
      <div class="col-sm-5">
        <input type="checkbox" class="pull-right" ng-model="typeReview">
      </div>
    </div>
        <div class="form-group">
            <label for=color-review" class="col-sm-7 control-label">
                <span>Color Review </span>
            </label>
            <div class="col-sm-5">
                <input type="checkbox" id="color-review" class="pull-right" ng-model="colorReview" >
            </div>
        </div>
        <div class="form-group">
            <label for="type-review" class="col-sm-7 control-label">
                <span>Type Review </span>
            </label>
            <div class="col-sm-5">
                <input type="checkbox"  id="type-review" class="pull-right" ng-model="typeReview">
            </div>

使用Javascript:

// Set The Review Checkboxes To Toggle Switches
$('#color-review').bootstrapToggle();
$('#type-review').bootstrapToggle();
$('#toggle-one').bootstrapToggle();

结果:以下是我的搜索结果图片的链接: Results

1 个答案:

答案 0 :(得分:0)

你看过https://github.com/cgarvis/angular-toggle-switch吗?

    $scope.topics:[{"on":true,"offLabel":"Off","onLabel":"On"}];

    <div ng-repeat="t in topics"> 
        <toggle-switch model="t.switch.on" on-label="t.switch.onLabel" off-label="t.switch.offLabel" switched="doSomethingToggle(t, $index)"></toggle-switch>
    </div>

enter image description here