Indicate checkbox checked in angular

Question

I have put together what I thought would be a very simple example of how I could fire off a function from a checkbox being checked in angular and have that function check to see the new value of the checkbox and accordingly display or not display a message. It works, but only after I have checked and unchecked the box at least once. For this reason I figured I simply would need to default the checkbox value to false and that would take care of the problem but it didn't. Can anyone help me tweak this to get it working and if so, maybe explain why my thinking is flawed, what do I not understand about the $scopes state. BTW it is also flipped, meaning that when I check the box the message goes away and when I uncheck it it says it's checked.

I am doing these exercises to get a better idea how angular works and I know deep down this is a javascript issue, but I still don't have it figured out. Any help is appreciated

app.js

  var formApp = angular

  .module('formApp', [])
  .controller('formController', function($scope) {

  $scope.formData = {};

  $scope.redCheckFunction = function() {
    if ($scope.formData.favoriteColors.red == true){
      $scope.redMessage = "red is checked";
    } else {
      $scope.redMessage = "";
    }
  };

});

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="app.js"></script>
</head>

<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
  <div>
  <h2>Angular Checkboxes</h2>
  <form>
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" name="name" 
            ng-model="formData.name">
      <label>Description</label>
      <input type="text" class="form-control" name="description" 
            ng-model="formData.description">
    </div>

    <!-- MULTIPLE CHECKBOXES -->
    <label>Favorite Colors</label>
    <div class="form-group">
      <label class="checkbox-inline">
        <input type="checkbox" name="favoriteColors" 
            ng-model="formData.favoriteColors.red" 
            ng-init="favoriteColors.red.disabled=false" 
            ng-click="redCheckFunction()"> Red
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="favoriteColors" 
            ng-model="formData.favoriteColors.blue"> Blue
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="favoriteColors" 
            ng-model="formData.favoriteColors.green"> Green
      </label>
    </div>

    <button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
    <h2>{{redMessage}}</h2>
  </form>

  <h2>Sample Form Object</h2>
  <pre>
    {{ formData }}
  </pre>

</div>
</body>
</html>

I created a pen to make things easier: Checkbox Pen

probably you have to use ng-value-true and ng-value-false — Avraam Mavridis
– Avraam Mavridis, Commented Mar 7, 2015 at 10:05
Hi Avraam, I did try that. And while it is a good way to create a default value my problem was that I was using ng-click instead of ng-change. But in this question I have learned both about ng-value-* and ng-change and although ng-value-* didn't help this particular problem I still came away with information of both. Thanks for the comment! I appreciate anyone who tries to help! — Eric Bishard
– Eric Bishard, Commented Mar 10, 2015 at 2:15

StarsSky · Accepted Answer · 2015-03-07 10:19:16Z

1

ng-click is fired before the model is updated:

Note that ngClick events will occur before the model is updated.

You need to use the ng-change directive:

Evaluate the given expression when the user changes the input.

http://codepen.io/anon/pen/azaJob

 <label>Favorite Colors</label>
        <div class="form-group">
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red" ng-init="formData.favoriteColors.red.disabled=false" ng-change="redCheckFunction()"> Red
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
            </label>
        </div>

When you enter the function redCheckFunction the value is already updated.

edited Mar 7, 2015 at 10:19

answered Mar 7, 2015 at 10:07

StarsSky

6,6996 gold badges40 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eric Bishard Over a year ago

I figured that was the case, but didn't know about the change directive, let me use that and I'll update in a minute.

StarsSky Over a year ago

I added a comment and a link: ng-click is fired before the model is updated,

Eric Bishard Over a year ago

Yep I got it, I do thank you for the time you spent to answer the question and help me out! Works perfect now and I'm learning!

Collectives™ on Stack Overflow

Indicate checkbox checked in angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related