Display the checkbox as selected using AngularJS

Question

Display the checkbox as selected using AngularJS

I have already submitted a form with a checkbox value. Now, I am trying to display the checkbox as "checked" using AngularJS based on the value retrieved from the data source. Can someone guide me on how to achieve this?

javascript angularjs checkbox

Answer 1

Answer №1

<input type="checkbox" checked="{{isChecked}}">

or

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

when using AngularJS

$scope.isChecked = true

or

$scope.isChecked = 1

as simple as that

Answer 2

<input type="checkbox" checked="{{isChecked}}">

or

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

when using AngularJS

$scope.isChecked = true

or

$scope.isChecked = 1

as simple as that

Answer 3

Answer №2

It seems like you have data from previously submitted forms that you want to display, specifically the items that were checked off. Do you need to show only the checked items or the entire form with checkboxes indicating which items were selected?

In order to achieve this, it is important to understand how your data is structured and stored. You will need to retrieve the data from local storage or wherever it is saved. In the example provided, the data is stored in a variable called $scope.model.

var App = angular.module('App', []);
App.controller('MyCtrl', function ($scope) {
    
    $scope.model = {
    "Item 1":true,
    "Item 2":true,
    "Item 3":false
    };
    
    // Create a list of checked items:
    $scope.checked = []
    for(var i in $scope.model){
        if($scope.model[i]){
            $scope.checked.push(i)
        }
    };
});

body {padding:20px}
div {padding: 10px 0}
p{display: inline}
label {margin-left: 10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App" ng-controller="MyCtrl">
  <div>
    <p>Box checked :</p>
    <label class="checkbox" ng-repeat="(key, value) in model">
        <input
            type="checkbox"
            ng-model="model[key]"/>{{key}}</label>
  </div>
  <hr/>
  <div>
    <p>List of checked item :</p>
    <ul ng-repeat="item in checked">
      <li>{{item}}</li>
    </ul>
  </div>
</body>

Answer 4

It seems like you have data from previously submitted forms that you want to display, specifically the items that were checked off. Do you need to show only the checked items or the entire form with checkboxes indicating which items were selected?

In order to achieve this, it is important to understand how your data is structured and stored. You will need to retrieve the data from local storage or wherever it is saved. In the example provided, the data is stored in a variable called $scope.model.

var App = angular.module('App', []);
App.controller('MyCtrl', function ($scope) {
    
    $scope.model = {
    "Item 1":true,
    "Item 2":true,
    "Item 3":false
    };
    
    // Create a list of checked items:
    $scope.checked = []
    for(var i in $scope.model){
        if($scope.model[i]){
            $scope.checked.push(i)
        }
    };
});

body {padding:20px}
div {padding: 10px 0}
p{display: inline}
label {margin-left: 10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App" ng-controller="MyCtrl">
  <div>
    <p>Box checked :</p>
    <label class="checkbox" ng-repeat="(key, value) in model">
        <input
            type="checkbox"
            ng-model="model[key]"/>{{key}}</label>
  </div>
  <hr/>
  <div>
    <p>List of checked item :</p>
    <ul ng-repeat="item in checked">
      <li>{{item}}</li>
    </ul>
  </div>
</body>

Display the checkbox as selected using AngularJS

Answer №1

Answer №2

Similar questions

Unable to invoke any fineUploader functions within a callback function

Adjusting the initial index for looping in AngularJS

Add to the current values of the REACT Form template property

Leverage all the documents obtained from a collection to reference in a Vue component

Steps for enabling (almost) unidirectional communication from a client to a server

In JavaScript, alert a message once all images have been clicked

The scrollOverflow feature in fullPage.js is not properly detecting the height of dynamically generated content

Expanding the functionality of the Ember JSONAPIAdapter for retrieving JSON data from a specified URL

What is the best way to integrate react-final-form with material-ui-chip-input in a seamless manner

What is the method for executing PHP code without the need for users to access the webpage?

Make sure to give an item a little extra attention by highlighting or making it blink after it has

Incorporating a feature that displays one show at a time and includes a sliding animation into an

What steps should I take to enable Google Maps style on mobile devices?

How can we automatically redirect users to an external website based on their responses to a specific question in SurveyJS?

Using Javascript and jQuery, populate a dropdown menu with options that are extracted from a different dropdown menu

Clear the cache in Angular to remove the page

What is the best way to retrieve router parameters within a JSX component?

Is it time to refresh the sibling element when it's selected, or is there

Executing server side code using client data in next.jsIn next.js, executing server side code with data

Dilemma of interdependencies between Socket.io and requirejs