Toggle button with angular ngrepeat

Question

I want to make a toggle button of bootstrap but I am facing some issues. Toggle button is not view only check box is displayed and when I remove ngRepeat directive then it work fine only for single button but I need multiple buttons by using ngRepeat . So kindly help me.

<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

First off, you have square brackets around {{device.dname}} so that isn't being rendered properly (not sure if that was intentional).

You have two checkboxes that show conditionally appear depending upon the device status. I would recommend to just use one checkbox.

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

As you can see, you can define the true value and the false value (being 0 or 1 in your case) and it displays and updates the scope variables properly.

If you were looking for them to be read only, a ng-checked directive would do the trick:

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

Try it out here:

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

Answer 3

This problem occurred for me too. I found that the following code would give me one correct looking toggle, and a number of generic looking checkboxes (inside a body which was bound to an AngularJS controller)

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

I then noticed that the following gave me three correct looking toggles

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

I was getting and populating the $scope.Queues property within the ".then" success event handler of an $http.get within the AngularJS controller. The problem was that the control which had the ng-repeat="q in Queues" had not been populated with any child elements at time of initial page load, so there were no input elements on which to implement the data-toggle="toggle" attribute; this needed to be done explicitly through JavaScript after the $scope had been applied and the data bound to the page.

Calling $scope.apply() within the event handler causes an error. Instead, assign a class (say, "foo") to the input elements within the table, and then add the following code to the end of the ".then" $html.get event handler:

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

This causes all of the newly created/bound input elements to be converted to bootstrap toggle controls. It's all a matter of timing. :-)

Thanks to Jim Hopkins for the tip on calling $scope.apply()