用角度ngrepeat切换按钮

Question

我想制作一个bootstrap的切换按钮，但我面临一些问题。 切换按钮不是仅查看复选框，当我删除ngRepeat指令时，它只适用于单个按钮，但我需要使用ngRepeat多个按钮。 所以请帮助我。

<div class="box-body" ng-controller="AutomationController">
  <div class="table-responsive">
    <table class="table table-hover ">
      <thead>
        <tr>
          <th>Device Name</th>
          <th>Status</th>
          <th>Action</th>
          <th>Edit Device Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="device in devices">
          <td>[[device.dname]]</td>
          <td>
            <span ng-if="device.status===1">ON</span>
            <span ng-if="device.status===0">OFF</span>
          </td>
          <td>
            <input type="checkbox" checked data-toggle="toggle" ng-if="device.status===1">
            <input type="checkbox" checked data-toggle="toggle" ng-if="device.status===0">
          </td>
          <td><a href="#"><i class="fa fa-pencil-square-o"></i></a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

检查jsfiddel

you should use radio button for toggle and bind that to status column.

Answer 2

首先，你在{{device.dname}}周围有方括号，这样就不能正确呈现（不确定这是否是故意的）。

根据设备状态，您有两个有条件显示的复选框。 我建议只使用一个复选框。

<input type="checkbox" data-toggle="toggle" ng-model="device.status" ng-true-value="1" ng-false-value="0">

如您所见，您可以定义true值和false值（在您的情况下为0或1），它会正确显示和更新范围变量。

如果您正在寻找它们只读，那么ng-checked指令可以解决这个问题：

<input type="checkbox" data-toggle="toggle" ng-checked="device.status" disabled="disabled">

在这里尝试一下：

https://jsfiddle.net/r0m4n/ncfs6q5w/

Answer 3

我也遇到了这个问题。 我发现下面的代码会给我一个正确的外观切换，以及一些通用的复选框（在一个绑定到AngularJS控制器的主体内）

<div>
    <input type="checkbox" checked data-toggle="toggle"/>
</div>
<div ng-repeat="q in Queues">
    <input type="checkbox" checked data-toggle="toggle"/>
</div>

然后我注意到以下给了我三个正确的外观切换

<div ng-repeat="q in [1,2,3]">
    <input type="checkbox" checked data-toggle="toggle"/>
</div> 

我在AngularJS控制器中的$ http.get的“.then”成功事件处理程序中获取并填充$ scope.Queues属性。 问题是在初始页面加载时没有使用任何子元素填充具有ng-repeat =“队列中的q”的控件，因此没有输入元素来实现data-toggle =“toggle” “属性; 这需要在应用$ scope并将数据绑定到页面后通过JavaScript显式完成。

在事件处理程序中调用$ scope.apply（）会导致错误。 相反，将一个类（比如“foo”）分配给表中的输入元素，然后将以下代码添加到“.then”$ html.get事件处理程序的末尾：

$timeout(function () {
    $scope.$apply(function () {
        $('.foo').bootstrapToggle();
    });
}, 0);

这会导致所有新创建/绑定的输入元素转换为引导切换控件。 这完全是时间问题。 :-)

感谢Jim Hopkins关于调用$ scope.apply（）的提示