Question

我想制作一个引导程序的切换按钮，但我遇到了一些问题。切换按钮不是仅查看复选框，当我删除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">

如您所见，您可以定义真值和假值（在您的情况下为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 in Queues” 的控件没有填充任何子元素，因此没有要实现的输入元素data-toggle =“ toggle”属性；在应用$ scope并将数据绑定到页面之后，需要通过JavaScript明确地完成此操作。

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

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

这会使所有新创建/绑定的输入元素都转换为引导切换控件。这都是时间问题。：-）

感谢Jim Hopkins提供了调用$ scope.apply（）的提示

带有角度ngrepeat

3 个答案: