CODEWITHSUNDEEP
angularjscheckbox
Nick Maddren
Nick Maddren

Reputation: 583

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

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.

Upvotes: 0

Views: 964

Answers (4)

Sahitya M
Sahitya M

Reputation: 11

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>

Upvotes: 0

FAITH KANGAI
FAITH KANGAI

Reputation: 16

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

Upvotes: 0

Jesus Gilberto Valenzuela
Jesus Gilberto Valenzuela

Reputation: 386

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.

Upvotes: 0

mkalish
mkalish

Reputation: 330

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>

Upvotes: 1

Related Questions