AngularJS ng-repeat understanding how to find checkbox values

Question

First off new to Angular here :)

I have a page that shows a list of items from a JSON object. That Json object has an array in it of dates

$obj = [
    {
        id: '1',
        GoalName: 'Smoke Less',
        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 got ng-repeat to show off the items the array, but I am struggling to understand how to control the checkboxes. When I present the items I set a date on the screen and I want to check the array to see if that date is present and if it is then check the checkbox. And additionally if the user then clicks the checkbox it updates the item. I vaguely understand that I need to make a model of the checkboxes, but don't fully understand how that works.

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>

when you make a ng-model (not ng=model), it is automatically available in the scope. — MACMAN
– MACMAN, Commented Sep 10, 2015 at 2:52

Rayon · Accepted Answer · 2015-09-10 03:51:45Z

Try this:

var app = angular.module('myApp', []);
app.controller('TrackGoals', function($scope) {
  $scope.goals = [{
    id: '1',
    GoalName: 'Smoke Less',
    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
    }
  }, {
    id: '2',
    GoalName: 'Smoke Less',
    StartDate: '9/1/2015',
    EndDate: '9/30/2015',
    GoalType: "positive",
    Category: "Health",
    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>

Thank you this got me most of the way there I appreciate it.

Collectives™ on Stack Overflow

AngularJS ng-repeat understanding how to find checkbox values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related