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

Facing an issue where the CSS class name is not displaying correctly when utilizing CSS Modules with my React

Determine the time difference between two dates, taking into account Daylight Saving Time adjustments

Iterating over an object in a React component

What could be the reason for this Javascript code not functioning as intended, failing to generate a random number between 1 and 3 when I click on any of the buttons

Node.js Firebase 3.0 authentication integration

Trouble with incorporating numbers into Titanium

Prevent all click and keyup events from being activated until the ajax call finishes

The left and right arrows maintain their visibility even when they are outside of the image

Display the files contained within a folder on the right side of a container by utilizing vue.js

Tips on incorporating negation in npm script's glob pattern usage?

Tips for customizing table cell styling in editable cells with React material table

Identify any missing periods and combine the years into a single range

Struggling with Ionic and Angular routing functionality?

Ways to receive a POST request from an external server on a GraphQL Server

Warning from Vue: Steer clear of directly changing a prop as it will be replaced whenever the parent component undergoes re-rendering

Using optional arguments in my AngularJS controller.js

Avoid duplicate items from being added to an array in AngularJS

There seems to be a problem with the data-binding functionality in the AngularJS code through

I'm having trouble understanding why my Javascript validation suddenly stopped functioning. Can anyone assist me in troubleshooting this issue?

Adding .js extension to relative imports in TypeScript compilation for ES6 modules