Angular ngRepeat is a powerful feature that allows for easy implementation of

Question

Angular ngRepeat is a powerful feature that allows for easy implementation of

I'm trying to create a toggle button using Bootstrap, but I've run into some issues. The toggle button is not displaying correctly; it's showing as a checkbox instead. When I remove the ngRepeat directive, the toggle button works fine for a single button, but I need it to work for multiple buttons using ngRepeat. Can someone please assist me with this?

<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>

javascript angularjs

Answer 1

Answer №1

Take a look at this demo

Consider implementing a radio button for toggling and linking it to the status column.

Answer 2

Take a look at this demo

Consider implementing a radio button for toggling and linking it to the status column.

Answer 3

Answer №2

Initially, take note that the square brackets around {{device.dname}} may be causing rendering issues (not sure if this was intentional).

You currently have two checkboxes that appear conditionally based on the device status. It might be simpler to use just one checkbox.

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

By specifying the true and false values (0 or 1), you can effectively display and update the scope variables.

If you want the checkboxes to be read-only, utilize the ng-checked directive:

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

Feel free to experiment with it using this link:

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

Answer 4

Initially, take note that the square brackets around {{device.dname}} may be causing rendering issues (not sure if this was intentional).

You currently have two checkboxes that appear conditionally based on the device status. It might be simpler to use just one checkbox.

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

By specifying the true and false values (0 or 1), you can effectively display and update the scope variables.

If you want the checkboxes to be read-only, utilize the ng-checked directive:

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

Feel free to experiment with it using this link:

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

Answer 5

Answer №3

I encountered a similar issue where I found that with the code below, only one toggle displayed correctly while the rest appeared as generic checkboxes within 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>

Later on, I discovered that by changing the code to the following, all three toggles displayed correctly:

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

The issue stemmed from the fact that the elements within ng-repeat="q in Queues" were not populated during the initial page load. To resolve this, JavaScript needed to be used after applying $scope and binding data to the page.

Attempting to call $scope.apply() within the event handler resulted in an error. Instead, adding a class (e.g., "foo") to the input elements and using the following code at the end of the ".then" $http.get event handler fixed the problem:

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

This ensures all newly created or bound input elements are converted into bootstrap toggle controls, resolving any timing issues. Huge thanks to Jim Hopkins for his advice on handling $scope.apply()

Answer 6

I encountered a similar issue where I found that with the code below, only one toggle displayed correctly while the rest appeared as generic checkboxes within 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>

Later on, I discovered that by changing the code to the following, all three toggles displayed correctly:

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

The issue stemmed from the fact that the elements within ng-repeat="q in Queues" were not populated during the initial page load. To resolve this, JavaScript needed to be used after applying $scope and binding data to the page.

Attempting to call $scope.apply() within the event handler resulted in an error. Instead, adding a class (e.g., "foo") to the input elements and using the following code at the end of the ".then" $http.get event handler fixed the problem:

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

This ensures all newly created or bound input elements are converted into bootstrap toggle controls, resolving any timing issues. Huge thanks to Jim Hopkins for his advice on handling $scope.apply()

Angular ngRepeat is a powerful feature that allows for easy implementation of

Answer №1

Answer №2

Answer №3

Similar questions

The setInterval function appears to be undefined despite being explicitly defined earlier

The attempt to create the dashboard module was unsuccessful because of an error: [$injector:nomod] For more information, visit: http://errors.angularjs.org/1.4.9/$injector/nomod?p

Exception thrown by ASP.Net Javascript code persists despite being commented out!

Issues encountered while establishing a connection to an API in React Native

Creating a function that writes to a file by utilizing the data input from

When deciding between utilizing a Javascript animation library and generating dynamically injected <style> tags in the header, consider the pros and cons of each

The latest Chrome update has caused a decrease in rendering and loading speeds for Ajax and Angular network

Receiving error message "[object Object]" while working with JavaScript

The functionality of Javascript is only accessible once you open the developer tools in Chrome

What is the best approach in JavaScript to compare and modify properties in two arrays of objects with efficiency?

Using jQuery to attach events and trigger them

SequelizeIncludeError: unable to fetch data using the 'include' method

The jQuery method .find() is unable to locate the <option> tag and behavior unpredictably

Checking for the existence of a row in Node.js using Sqlite3

How can I create a synchronous method in Angular that waits for a response without using subscribe, similar to how synchronous methods work in C#?

Utilize features from both angular-strap and ui-bootstrap to enhance your project

Dealing with MySQL reconnections in a Node.js REST application

Is there a way to transition an element from a fixed layout position to an absolute layout position through animation?

Is there a way to dynamically modify a website's default viewport settings in a mobile browser?

Can you extract information from the XML file and modify the anchor tags?