Padraig
Padraig

Reputation: 3707

How to get the value of a checkbox item in Angular

I have three checkbox items

<input type="checkbox" name="my_list" value="val 1">
<input type="checkbox" name="my_list" value="val 2">
<input type="checkbox" name="my_list" value="val 3">

What I want to be able to do in angular is when I click a box, e.g. "val 2"

my_list.value    // yields 'val 2'
my_list.checked  // yields true or false depending on if it's checked or not

The problem is that

 my_list.value

returns true or false, which is not what I want. I want it to return what I have in the 'value' attribute.

Upvotes: 0

Views: 167

Answers (3)

Padraig
Padraig

Reputation: 3707

Thanks guys but I solved it myself.

I use a checkbox like this :

 <input type="checkbox" name="Added Items" ng-change="checkbox_change('my_list1', 'val 1')" ng-model="my_list1" value="val 1">

The arguments specify 1. Which model to access. 2. The the value of the checkbox.

I then use this function

      $scope.checkbox_change = function(key, val) {
        alert($scope[key]);
        alert(val);
      }

Which allows me to access the model and the value of the checkbox.

Upvotes: 0

kmdsax
kmdsax

Reputation: 1361

You can use ng-true-value like so:

<input type="checkbox" name="my_list" ng-model="my_list" ng-true-value="val 1">
<input type="checkbox" name="my_list" ng-model="my_list" ng-true-value="val 2">
<input type="checkbox" name="my_list" ng-model="my_list" ng-true-value="val 3">    

{{my_list}} will then be empty if nothing is checked, and show "val 1" if the first checkbox is checked, etc.

Upvotes: 1

lort
lort

Reputation: 1457

Checkbox is a multiple-choice input so each of them should have its own name (or rather: ng-model). If you want a single-choice input, you sholud use radio:

<input type="radio" ng-model="value" value="val 1" />
<input type="radio" ng-model="value" value="val 2" />

And now, {{value}} will be evaluated to val 1 or val 2, according to selection.

Upvotes: 1

Related Questions