Checkbox Input is returning Boolean values when placed in view model AngularJS

Question

I have the following HTML markup:

        <div class="blog-admin-article-sidebar-item-content">
          <div class="checkbox">
            <label><input ng-model="vm.newArticle.category" type="checkbox" value="Volkswagen">Volkswagen</label>
          </div>
          <div class="checkbox">
            <label><input ng-model="vm.newArticle.category" type="checkbox" value="SEAT">SEAT</label>
          </div>
          <div class="checkbox">
            <label><input ng-model="vm.newArticle.category" type="checkbox" value="SKODA">SKODA</label>
          </div>
          <div class="checkbox">
            <label><input ng-model="vm.newArticle.category" type="checkbox" value="Pulman Group">Pulman Group</label>
          </div>
        </div>

As you can see my input check-box's have custom values such as Volkswagen for example.

For some reason I seem to be having an issue with selecting the check-box's and placing the value within my view model.

Here is an example of my controller:

(function(){
  'use strict';

  angular
    .module('app.admin')
    .controller('AdminController', AdminController);

    AdminController.$inject = ['$firebaseArray'];

    function AdminController($firebaseArray) {
      var vm = this;

      var fireArticles = new Firebase('XXX');

      function Article() {
        this.name = '';
        this.content = '';
        this.category = '';
        this.published = false;
      }

      vm.newArticle = new Article();
      vm.articles = $firebaseArray(fireArticles);
      vm.addArticle = addArticle;

      function addArticle() {
        vm.articles.$add(vm.newArticle);
      }
    }
})();

As you see I am declaring my View Model named as vm.

I'm quite confused why the checkbox value is being placed within my vm.newArticle.category as a Boolean value and not the value that is assigned to the checkbox?

My view model is currently outputting:

"category":true

Any help with this would be great, thanks.

mkalish · Accepted Answer · 2016-03-08 15:01:22Z

1

Based on your use case, a checkbox seems to be the wrong control because article.category can only ever have one value and a checkbox would allow multiple selections. In this case, I would recommend using radio buttons example

However, if you did want to support multiple categories being selected at the same time I would recommend this approach.

function Article() {
  this.name = '';
  this.content = '';
  this.category = {
    skoda: false,
    seat: false,
    Volkswagen: false
  }
}

An html: <input ng-model="vm.newArticle.category.skoda"type="checkbox">SKODA</label>

answered Mar 8, 2016 at 15:01

mkalish

3302 silver badges8 bronze badges

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

Comments

Nikolay Mihaylov · Accepted Answer · 2016-08-05 09:12:54Z

0

If you have to bind some value upon checking and unchecking the checkbox use ng-true-value="someValue" and ng-false-value="someValue".

edited Aug 5, 2016 at 9:12

Nikolay Mihaylov

3,9028 gold badges29 silver badges33 bronze badges

answered Aug 5, 2016 at 9:02

FAITH KANGAI

163 bronze badges

Comments

Jesus Gilberto Valenzuela · Accepted Answer · 2016-03-08 18:49:55Z

0

You can use "select" control instead of checkbox.

for example:

<select ng-model="vm.newArticle.category" required>
     <option value="Volkswagen">Volkswagen</option>
     <option value="SEAT">SEAT</option>
     <option value="SKODA">SKODA</option>
</select>

and you will have your "category" populated as string in your object.

answered Mar 8, 2016 at 18:49

Jesus Gilberto Valenzuela

3863 silver badges9 bronze badges

Comments

Dmitriy · Accepted Answer · 2018-01-11 08:01:33Z

0

if you are using boolean variable to bind the checkbox please refer the below example:

  <div ng-repeat="book in books">
  <input type="checkbox"   ng-model="book.selected"  ng-
  click="function(sample)">
  </div>

edited Jan 11, 2018 at 8:01

Dmitriy

5,58512 gold badges27 silver badges39 bronze badges

answered Jan 11, 2018 at 7:30

Sahitya M

114 bronze badges

Collectives™ on Stack Overflow

Checkbox Input is returning Boolean values when placed in view model AngularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related