CODEWITHSUNDEEP
angularjscheckbox
Alex Karpov
Alex Karpov

Reputation: 329

angularjs checkbox Incorrect response in console

I have two criteria: 1) Only allow one of two boxes selected at one time. 2) Capture the name of the box that is selected.

However, when I print out the list of checkbox objects they are correct, but when I check in the console they are not correct. For example,

HTML:

<div ng-repeat="treatment in treatment_list">
 <input type="checkbox" value="{{treatment.name}}"
        ng-model="treatment.checked"
        ng-click="updateTreatment($index, treatment_list);
                  checkedTreatment(treatment_list)">
 <label>Treatment {{treatment.name.toUpperCase()}}</label></input><br>
</div>
{{treatment_list}}

Controller:

$scope.treatment_list = [
    {
      name: 'a',
      checked: false
    }, {
      name: 'b',
      checked: false
    }
  ];

$scope.updateTreatment = function(position, treatment_list) {
    console.log(treatment_list);
    angular.forEach(treatment_list, function(treatment, index) {
      console.log(treatment.name, treatment.checked);
      if (position != index) {
        treatment.checked = false;
      }
    });
  };

$scope.$watch('treatment.checked', function (treatment) {
    console.log(treatment);
  });

Plunker: https://plnkr.co/edit/Hkb4IeKxi0TRqHRJA4JN?p=preview

Upvotes: 1

Views: 41

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Use radio buttons instead:

angular.module("app",[])
.controller('ExampleController', function($scope) {
      $scope.color = {
        name: 'blue'
      };
      $scope.specialValue = {
        "id": "12345",
        "value": "green"
      };
      $scope.colorChange = function(color) {
          console.log(color);
      };
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<form name="myForm" ng-controller="ExampleController">
  <label>
    <input type="radio" ng-model="color.name" value="red"
           ng-change="colorChange(color.name)" />
    Red
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" ng-value="specialValue"
           ng-change="colorChange(color.name)" />
    Green
  </label><br/>
  <label>
    <input type="radio" ng-model="color.name" value="blue"
           ng-change="colorChange(color.name)" />
    Blue
  </label><br/>
  <tt>color = {{color.name | json}}</tt><br/>
 </form>
 Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
</body>

For more infomation, see AngularJS input type=radio Directive API Reference

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

Inorder to fullfill your requirement you should just use a radio box whith ng-model, it will work out of the box for you.

Upvotes: 1

Related Questions