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

Answer 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.

Indicate checkbox checked in angular

Question

1 answers

solution1
1 ACCPTED 2015-03-07 10:07:47

Indicate checkbox checked in angular

Question

1 answers

solution1 1 ACCPTED 2015-03-07 10:07:47

solution1
1 ACCPTED 2015-03-07 10:07:47