Learn the process of connecting checkboxes to a database in MeanStack using Angular

Hey everyone, I'm currently working with AngularJS ng-repeat and I am trying to dynamically bind a checkbox based on a true or false value from the database. However, even when the database value is set to true, the checkbox does not automatically check or uncheck itself. How can I fix this issue?

 serverjs// app.get('/contactdetail', function (req, res) {
console.log('I received a GET request');

db.contactdetail.find(function (err, docs) {

    console.log(docs);
    res.json(docs);

});});


controller var refresh = function () {
    $http.get('/contactdetail').success(function (response) {

        console.log('I received a GET request');
        $scope.contactdetail = response;

    });
};refresh();


  <tr ng-repeat="contacts in contactdetail><span  editable-checkbox="contacts.Number" e-name="Number" e-form="rowform" onaftersave="Dhkclick(contacts._id, contacts.Number)">{{ contacts.Number|| 'empty' }}
                                    </span></tr>

Answer №1

To successfully implement the editable-checkbox feature, remove the e-name and e-form attributes and bind the checkbox ngmodel with data from the database. This will ensure that it functions correctly. For example:

<span editable-checkbox="contacts.Number" onaftersave="Dhkclick(contacts._id,contacts.Number)">
{{ contacts.Number|| 'empty' }}

Important Update!

Ensure that contacts.Number is a boolean value. If it is currently stored as a string, be sure to convert it to a boolean first.

angular.forEach($scope.contactdetail, function (v) {
      if (v.Number === 'true') {
         v.Number = true;
      } else if (v.Number === 'false') {
         v.Number = false;
      }
  });

For more information and code examples, visit the updated JsFiddle Link: http://jsfiddle.net/ts3LxjLc/9/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include the file name and size as query parameters in Node.js?

To retrieve an image from the folder, a query needs to be passed containing the filename and dimensions like this: localhost:3000/images?filename=myImage&width=100&height=100 The initial objective is to fetch images from the designated folder, res ...

Ensuring that md-select(s) created through ng-repeat are linked to the same model

<div ng-repeat="(key, value) in dataSet | groupBy: 'partner.partnerName'"> <md-select ng-model="userName" placeholder="{{ key }}" class="partnerUser" > <md-option >{{ key }} </md-option> <md-option ng-repe ...

Displaying errors in AngularJS form submission

I am currently using an AngularJS step wizard and within the form for the initial step, I would like validation errors to only appear when the user attempts to submit. At the moment, the error message displays as soon as the user navigates to the step, but ...

After deployment, AngularJS is failing to function

My AngularJS module is not functioning properly after being deployed on IIS 8.5. The code works perfectly fine on my local machine with Visual Studio 2012. angular.module('MyApp').controller("DataViewController", ["$scope", "RequestService", fun ...

Error encountered with AJAX call when attempting to utilize string method

I am looking to add HTML content to a TinyMCE editor in an ASP.NET MVC project. After some thought, I have found a solution that involves converting the HTML file to a string on the server side and then calling it using Ajax on the client side. Here is a ...

Creating a Dynamic Slideshow on Autopilot

My JavaScript skills are not perfect and I'm feeling a bit lost. I have this code for a slideshow, but I want to make it automatic while also allowing users to navigate between images freely. I'm struggling to figure out how to implement this fun ...

I must adjust the size of images based on the size of the viewer's screen

Hello everyone, I could really use some assistance as I am not an expert programmer but just a site admin. My issue is this: I have a website running on PHP and I want to display images to my members while keeping them within specific size limits so they ...

Display a loading animation before the page loads upon clicking

$("#button").click(function(){ $(document).ready(function() { $('#wrapper').load('page.php'); }); }); <div id="wrapper"></div> <div id="button">click me</div> I would like to display a loading ic ...

The customization of a class within an array loop is not functioning properly

I'm facing an issue where I've added a class (question) to each element in an array, and the loop is running smoothly. However, I'm having trouble getting jQuery to recognize the class - it's almost as if it doesn't exist... I sus ...

JQuery Ajax: The loaded content flickers into view, revealing old content momentarily

Having an issue with my ajax code. I am working on a project that involves some links and a content area. The idea is that when a user clicks on a link, the content area should be hidden, load new data, and then show the updated content. However, I have no ...

Manipulating strings in Discord.js

if(msg.content.includes("[mid]")) { let str = msg.content let pokeID = str.substring( str.indexOf("[mid]") + 5, str.lastIndexOf("[/mid") //get the unique-code for a pokemon ); msg.channel.send ...

Comparing the use of visibility: hidden with -webkit-transform: translate3d() within a PhoneGap application

Currently, I am creating a hybrid application using PhoneGap. As part of the design, I have several divs (each representing a page) that I toggle between by changing their visibility in CSS using "visibility: hidden" and "visible". However, I recently ca ...

How can I display two slides at once in Ionic 2/3 on a wide screen?

I have been searching for a solution that will allow me to display 1 ion-slide if the device screen is small, but if it's larger, then I want to display 2 ion-slides. Unfortunately, I have not been able to find a suitable solution yet. As an example, ...

method for sorting labels in Select element in ReactJS

Hey there, I'm facing an issue with the code snippet available here. I would really appreciate it if you could assist me in resolving this problem. This is the code: import React from "react"; import { Select } from "antd" ...

How to smoothly scroll with jQuery animation without relying on $.browser and preventing double firing

Many inquiries have arisen about the cross-browser functionality of $('html, body').animate();, yet I seem unable to find a solution for this particular issue: I am eager to eliminate $.browser from my code, but I do not want the scroll event to ...

Tips for switching the background image in React while a page is loading?

Is there a way to automatically change the background of a page when it loads, instead of requiring a button click? import img1 from '../images/img1.jpg'; import img2 from '../images/img2.jpg'; import img3 from '../images/img3.jpg& ...

What causes an "Internal Server Error" when attempting to use data for a database request with AJAX GET/POST in Laravel?

There's a unique issue that I'm struggling to resolve... Every time I drag and drop an event into the calendar, an Ajax Post Request is sent to my controller. The controller then inserts some data into the database with the event name received v ...

Gain access to a variable within an AngularJS directive's scope

I am facing an issue with the following directive var chartDir = function () { return { scope: { stat: '=' }, link: function (scope, element, attr) { console.log(scope); return; } } HTML < ...

Guide to implementing a DataTable in MVC4 UI using jQuery

Looking to set up a DataTable using jQuery similar to the one shown in this image: https://i.stack.imgur.com/DNUcd.png I'm not very comfortable with jQuery, so please be patient and avoid asking me what I've tried. I don't know how to stru ...

The Benefits of Semantic Class Names compared to Microdata

As I strive to use semantic class names, my exploration of microdata and SEO raises a question: Is it necessary to use both? Compare these two HTML snippets representing an event: Using CSS classes: <div class="event" itemscope itemtype="http://schema ...