The checkbox in angular js is failing to be marked as selected

<tr ng-repeat="languages in samln">
   <td>
      <span>{{languages.emplang}}</span>
   </td>
   <td>
      <input type="checkbox" name="checkbox1-" id="sp1" value="false" style="margin-left:40px;" ng-model="languages.speak">
   </td>
   <td>
      <input type="checkbox" name="checkbox2-" id="rea1" value="false" style="margin-left:40px;" ng-model="languages.read">
   </td>
   <td>
      <input type="checkbox" name="checkbox3-" id= "wr1" value="false" style="margin-left:40px;" ng-model="languages.write">
   </td>
</tr>

There are two possible string values, true and false. Even though the value is set to "false", checkboxes are not checked. The "languages" variable represents a list of languages.

javascriptangularjscheckbox

Answer №1

<input type="checkbox" checked ng-model="isChecked" />

In the controller:

$scope.isChecked = true;

Answer №2

The value attribute is rarely utilized in Angular as the model value is preferred for setting the check status. There are instances where you may also need to specify the true/false criteria. You have the option to initialize this using the ng-init directive, such as shown below:

<input type="checkbox" name="checkbox1" id="sp1" 
     ng-true-value="'true'" ng-false-value="'false'"    
     ng-init="test='true'" ng-model="test">

It's important to note that when defining the true/false values, they must be enclosed in single quotes since ng requires an expression in that context.

Answer №3

<script>
  angular.module('checkboxApp', [])
    .controller('CheckboxController', ['$scope', function($scope) {
      $scope.checkboxData = {
       option1 : true,
       option2 : 'ENABLED'
     };
    }]);
</script>
<form name="myForm" ng-controller="CheckboxController">
  <label>Option 1:
    <input type="checkbox" ng-model="checkboxData.option1">
  </label><br/>
  <label>Option 2:
    <input type="checkbox" ng-model="checkboxData.option2"
           ng-true-value="'ENABLED'" ng-false-value="'DISABLED'">
   </label><br/>
  <tt>option1 = {{checkboxData.option1}}</tt><br/>
  <tt>option2 = {{checkboxData.option2}}</tt><br/>
 </form>

Source: AngularJS documentation / API Reference / ng / input components in ng / input[checkbox]

Answer №4

To have the check-box pre-selected, you can use either checked="" or checked="checked".

For more information, please refer to the link below.

https://www.w3.org/TR/html-markup/input.checkbox.html

   <tr ng-repeat="languages in samln">
       <td>
          <span>{{languages.emplang}}</span>
       </td>
       <td>
          <input type="checkbox" name="checkbox1-" id="sp1" checked="" style="margin-left:40px;" ng-model="languages.speak">
       </td>
       <td>
          <input type="checkbox" name="checkbox2-" id="rea1" checked="" style="margin-left:40px;" ng-model="languages.read">
       </td>
       <td>
          <input type="checkbox" name="checkbox3-" id= "wr1" checked="" style="margin-left:40px;" ng-model="languages.write">
       </td>
    </tr>

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

Show a pop-up notification when the quantity in one set of cells matches the quantity in a different set of cells

Does anyone have a script that can show a popup message when the count of yellow cells matches the count of red cells? Here is a visual representation of what I'm looking for. Any assistance would be greatly appreciated. https://i.sstatic.net/2bJsx.p ...

javascriptcsshtml

What is the process for obtaining a client-side cookie using next.js?

I'm currently facing an issue where I can't seem to maintain a constant value for the isAuthenticated variable between server-side and client-side in next.js. In my setup, I am using a custom app.js file to wrap the app with Apollo Provider. The ...

javascriptreactjsoauthjwtnext.js

Exploring the power of VueJs through chaining actions and promises

Within my component, I have two actions set to trigger upon mounting. These actions individually fetch data from the backend and require calling mutations. The issue arises when the second mutation is dependent on the result of the first call. It's cr ...

javascriptvue.jsvuexes6-promise

Ways to reach the scope of transcluded elements

Within my directive element, there is a form that needs to set some scope properties. Here's an example: <trans-dir> <form role='form' class='form-inline'> <div class='form-group'> Se ...

angularjsangularjs-directive

Error found in Paper.js at line 81: Uncaught TypeError - Unable to access properties of undefined (specifically '1') while utilizing Material UI and Joy UI

I am encountering an issue while using react js with material UI and JoyUI, where I am getting a blank screen. Below is the code snippet causing the problem: import React from 'react'; import { CssVarsProvider } from '@mui/joy/styles'; ...

javascriptreactjsmaterial-uijoy-ui

Using ASP.NET to retrieve data with AJAX and pass parameters to a web method

Looking for assistance with a web method I have created: [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string test(string Name, int? Age) { return "returned value"; } Below is the ajax call I am attempting: $.ajax({ type: "GET", ur ...

javascriptjqueryasp.netajaxasp.net-web-api

In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

I am facing an issue with a simple div that has a transition effect. It goes from a yellow background to a red one. <div class="bar" ng-class="{'bar-visible': vm.visible}"> The transition works smoothly when the bar-visible class is added ...

angularjscsscss-transitionsng-animate

Closing The Menu In JavaScript On Click Event

As a newcomer to JavaScript, I'm facing some difficulties in achieving the desired outcome. I created an off-canvas menu inspired by w3 school's example. My goal is to allow users to click the hamburger glyphicon to close the menu when it's ...

javascriptjquery

Leverage the version attribute within package.json within one of its scripts

Is there a way to access the version attribute of my package.json file within one of its scripts? I want to include the version number in the name of the JS bundle, instead of using a hash as an identifier. This is what I currently have: "build-js": "bro ...

javascriptnode.jsnpm

Is there a way to update the parent value when the child is activated?

I need to create a dropdown menu for users to select their email provider - either gmail, hotmail, or outlook. Once they make a selection, I want the button text to update accordingly. The catch is that I can only use bootstrap for this project and cannot ...

javascripthtmlbootstrap-4

broadcast updated $rootScope

How do I update the $rootScope.$broadcast with a new value? Let's take a look at this code snippet: var test = "fisk"; if(angular.element(this).hasClass('monster')) { var monster_info = angular.element(this).find("img").attr("title"); ...

javascriptangularjsrootscope

Update the href attribute with values from the form fields

My current project involves creating a form with 5 input fields: Service type Number of days Number of children Number of adults I want to dynamically change the value of a button based on these variables using JavaScript. Here is my code so far: JS ...

javascriptjquery

Creating a Curved Border with Clip Path in CSS

Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish thi ...

javascripthtmlcss

I am having trouble displaying images with Material UI CardMedia

I'm currently using CardMedia to display images on my webpage, but unfortunately, the image is not appearing as expected. After researching a similar issue on Stack Overflow, I discovered that the suggested solution involved importing the image and t ...

javascriptreactjsmaterial-ui

contenteditable -- Utilizing AngularJS to create a block element for the title only

When I click on an input field that is editable, I want the background color to change to white within the box. Can someone please assist me with this? Below is my code: HTML <div id="section{{section.index}}"> <h2 class="title" contentedit ...

javascripthtmlcssangularjscontenteditable

Changing a complex object within a nested array of a BehaviorSubject

I'm currently working on an Angular app. Within my service, DocumentService, I have a BehaviorSubject that holds an array of Documents. documents: BehaviorSubject<Document[]> Let me provide you with some insight into the various classes I' ...

javascriptangulartypescriptrxjs

Guide to importing Bootstrap 5 bundle js using npm

Having some issues with implementing Bootstrap5 and NPM. The website design is using bootstrap, which works fine, but not all the JavaScript components (dropdowns, modals, etc). I want to figure out how to import the Bootstrap JS bundle without relying on ...

javascriptnpmbootstrap-5

Guide on transferring a 200MB database to an HTML5 web page executed locally

In the process of creating a search tool for internal use within my organization, I have established a deployment strategy that involves: Storing an HTML5 web page on the file server. Keeping a 200MB JSON or JavaScript file in another location. Currentl ...

javascriptjqueryjsonhtml

Form a bond with the latest SignalR library to initiate communication

After attempting to connect to an asp.net core signalR server using the code below, I encountered some issues. Can you spot where I might have gone wrong? Here is the error message that I received: Error: The "promise" option must be a Promise v ...

javascriptjquerykendo-gridasp.net-core-signalr

What is the best way to retrieve the value of a selected button from a v-btn-toggle?

<v-btn-toggle v-model="toggle_one"> <v-btn flat> CAD50 </v-btn> <v-btn flat> CAD100 </v-btn> <v-btn flat> CAD1000 </v-btn> <v-btn flat> CAD10000 </v-btn> ...

javascriptvue.jsvuetify.js