Mastering the concept of accessing checkbox values in AngularJS using ng-repeat

Question

Mastering the concept of accessing checkbox values in AngularJS using ng-repeat

Just starting out with Angular so bear with me :)

I'm working on a page that displays a list of items from a JSON object. This JSON object contains an array of dates.

$obj = [
    {
        id: '1',
        GoalName: 'Drink More Water',
        StartDate: '9/1/2015',
        EndDate: '9/30/2015',
        GoalType: "positive",
        Category: "Health",
        Weight: "3",
        TimesPerWeek: 4,
        Dates: {
            "09/11/2015": 0,
            "09/10/2015": 1,
            "09/08/2015": 1
        }
    }

I've managed to use ng-repeat to display the items from the array, but I'm struggling with controlling the checkboxes. What I want to do is display a date on the screen and then check if that date is present in the array, and if it is, mark the checkbox as checked. Additionally, when a user clicks the checkbox, it should update the item. I know I need to create a model for the checkboxes, but I'm not completely sure how to go about doing that.

app.controller('TrackGoals', function ($scope) {
    $scope.today = Date.today();
});

<ul class="list" id="thehabits" ng-repeat="goal in goals">
    <li class="expanded-cell">
        <div class="pull-right form-group cell-content">
            <label>
                <input type="checkbox" class="option-input checkbox" ng-model="ids[goal.dates.id].value">
            </label>
        </div>
        <div class="cell-content">
            <span id="habittext" class="title">{{ goal.GoalName }} </span>
        </div>
    </li>
</ul>

javascript json angularjs checkbox

Answer 1

Answer №1

Give this a try:

var app = angular.module('myApp', []);
app.controller('TrackGoals', function($scope) {
  $scope.goals = [{
    id: '1',
    GoalName: 'Eat Healthier',
    StartDate: '11/1/2015',
    EndDate: '11/30/2015',
    GoalType: "positive",
    Category: "Health",
    Weight: "3",
    TimesPerWeek: 4,
    Dates: {
      "11/11/2015": 0,
      "11/10/2015": 1,
      "11/08/2015": 1
    }
  }, {
    id: '2',
    GoalName: 'Exercise More',
    StartDate: '11/1/2015',
    EndDate: '11/30/2015',
    GoalType: "positive",
    Category: "Fitness",
    Weight: "3",
    TimesPerWeek: 4,
    Dates: {}
  }];
  $scope.setCheckboxVal = function(val) {
    var arr = [];
    for (var i in val) {
      if (val.hasOwnProperty(i)) {
        arr.push({
          date: i,
          value: val[i]
        });
      }
    }
    return !!arr.length;
  };
  $scope.showData = function() {
    console.log(JSON.stringify($scope.goals));
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="angular.min.js"></script>
</head>

<body ng-controller="TrackGoals">
  <ul class="list" id="thehabits" ng-repeat="goal in goals">
    <li class="expanded-cell">
      <div class="pull-right form-group cell-content">
        <label>
          <input type="checkbox" class="option-input checkbox" ng-model="goal.checkboxVal" ng-init="goal.checkboxVal=setCheckboxVal(goal.Dates)">
        </label>
      </div>
      <div class="cell-content">
        <span id="habittext" class="title">{{ goal.GoalName }} </span>
      </div>
    </li>
  </ul>
  <button type="button" ng-click="showData()">Show data</button>
</body>

</html>

Answer 2

Give this a try:

var app = angular.module('myApp', []);
app.controller('TrackGoals', function($scope) {
  $scope.goals = [{
    id: '1',
    GoalName: 'Eat Healthier',
    StartDate: '11/1/2015',
    EndDate: '11/30/2015',
    GoalType: "positive",
    Category: "Health",
    Weight: "3",
    TimesPerWeek: 4,
    Dates: {
      "11/11/2015": 0,
      "11/10/2015": 1,
      "11/08/2015": 1
    }
  }, {
    id: '2',
    GoalName: 'Exercise More',
    StartDate: '11/1/2015',
    EndDate: '11/30/2015',
    GoalType: "positive",
    Category: "Fitness",
    Weight: "3",
    TimesPerWeek: 4,
    Dates: {}
  }];
  $scope.setCheckboxVal = function(val) {
    var arr = [];
    for (var i in val) {
      if (val.hasOwnProperty(i)) {
        arr.push({
          date: i,
          value: val[i]
        });
      }
    }
    return !!arr.length;
  };
  $scope.showData = function() {
    console.log(JSON.stringify($scope.goals));
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="angular.min.js"></script>
</head>

<body ng-controller="TrackGoals">
  <ul class="list" id="thehabits" ng-repeat="goal in goals">
    <li class="expanded-cell">
      <div class="pull-right form-group cell-content">
        <label>
          <input type="checkbox" class="option-input checkbox" ng-model="goal.checkboxVal" ng-init="goal.checkboxVal=setCheckboxVal(goal.Dates)">
        </label>
      </div>
      <div class="cell-content">
        <span id="habittext" class="title">{{ goal.GoalName }} </span>
      </div>
    </li>
  </ul>
  <button type="button" ng-click="showData()">Show data</button>
</body>

</html>

Mastering the concept of accessing checkbox values in AngularJS using ng-repeat

Answer №1

Similar questions

CSS - starting fresh with animations

If I am already in the child router and attempt to refresh the browser, I will not be able to load

extracting attributes from JSON using Python

Utilizing a custom adapter for a ListView in an Android application

What is the best way to assign a JavaScript return value to a PHP variable?

Dynamically linking tabbable tabs is a useful technique that allows for

Experiencing difficulties integrating Python Requests with the Bonanza API in Node.js due to a lack of proper documentation and inability to make successful API

Storing information using JSON within a specialized class

The function HandleKeyPress is failing to recognize the input from the down arrow

Implementing setTimeout with the copy button: A guide

Is it necessary to confirm the validity of url.format(urlObject)?

Enhancing the styling of checkboxes using CSS and Javascript

JavaScript file creation and opening issue in Firefox

The v-data-table fails to refresh with new data

Making a jQuery post request that returns JSON data

"Ensure only one checkbox is selected at a time by unchecking the previous

Generating an image in Fabric.js on a Node server following the retrieval of canvas data from a JSON

"Receiving data from an axios call in React using useEffect leads to an error message: "Property 'numero' cannot be read as undefined"

Setting a default string value for a null JSONObject

Include a link to a JavaScript file within a dynamically created HTML page in a Delphi VCL application