checkboxes that append to a model in Angular.js

Question

I have a model, which will be related to a number of other models. Think of a stack overflow question, for example, where it is a question related to tags. The final Object might look as follows before a POST or a PUT:

{
  id: 28329332,
  title: "checkboxes that append to a model in Angular.js",
  tags: [{
    id: 5678,
    name: "angularjs"
  }, {
    id: 890,
    name: "JavaScript"
  }]
}

So far, I have the following controller:

.controller('CreateQuestionCtrl',
    function($scope, $location, Question, Tag) {
      $scope.question = new Question();
      $scope.page = 1;
      $scope.getTags = function() {
        Tag.query({ page: $scope.page }, function(data) {
          $scope.tags = data;
        }, function(err) {
          // to do, error when they try to use a page that doesn't exist
        })
      };
      $scope.create = function() {
        $scope.question.$save(function(data) {
          $location.path("/question/" + data.id);
        });
      };
      $scope.$watch($scope.page, $scope.getTags);
    }
  )

So I display all of the tags, paginated, on the page. I want them to be able to select the given tags and append it to my model so that it can be saved.

How can I create a checkbox interface where it updates the $scope.question with the selected other models?

EDIT: think I might be part of the way there

<div class="checkbox" ng-repeat="tag in tags.objects">
  <label><input
    type="checkbox"
    ng-change="setTag(tag.id)"
    ng-model="tag"
  >&nbsp;{{ tag.name }}
</div>

Then on the controller

$scope.setTag = function(id) {
  Tag.get({id: id}, function(data) {
    // don't know what now
  })
}

So you want a check-box created and bind to each of the tags? — A G
– A G, Commented Feb 4, 2015 at 19:42
yes, I want some sort of ng-checked event which will take the entire model and append it to my Question.tags — corvid
– corvid, Commented Feb 4, 2015 at 19:44

Cracker · Accepted Answer · 2015-02-04 19:44:42Z

1

Basically, it takes a directive to approach your goal Take a look at the plunker I wrote for you. As you can see, in the list of selected tags the text property of each tag is displayed, it means that the object structure is kept. In your case, you would bind the $scope.question.tags array as the collection attribute and each tag from the $scope.tags as the element attribute.

answered Feb 4, 2015 at 19:44

Cracker

9122 gold badges15 silver badges26 bronze badges

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

Comments

A G · Accepted Answer · 2015-02-04 20:07:16Z

Here a codepen for multiple check-boxes bound to the same model.

HTML

<html ng-app="codePen" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Multiple Checkboxes</title>
</head>

<body>
  <div ng:controller="MainCtrl">
    <label ng-repeat="tag in model.tags">
        <input type="checkbox" ng-model="tag.enabled" ng-change="onChecked()"> {{tag.name}} 
    </label>
    <p>tags: {{model.tags}}</p>
    <p> checkCount: {{counter}}  </p>
</body>
</html>

JS

var app = angular.module('codePen', []);    
    app.controller('MainCtrl', function($scope){
        $scope.model = { id: 28329332,
        title: "checkboxes that append to a model in Angular.js",
        tags: [{
          id: 5678,
          name: "angularjs",
          enabled: false
        }, {
          id: 890,
          name: "JavaScript",
          enabled: true
        }]
        };
      $scope.counter = 0;
      $scope.onChecked = function (){
        $scope.counter++;
      };
 });

not sure if that answer will necessarily be extensible, as I could have hundreds of tags. I'd like to mostly append to my existing model
I have updated answer with ng-change which can track checkbox change. Ideally you should convert the above into a directive which could be bound to some model.

corvid · Accepted Answer · 2015-02-04 22:28:27Z

0

I found a great library called checklist-model worth mentioning if anyone is looking up this question. All I had to do was this, more or less:

<div class="checkbox" ng-repeat="tag in tags">
  <label>
    <input type="checkbox" checklist-model="question.tags" checklist-value="tags"> {{ tag.name }}
  </label>
</div>

Found this on googling "directives for angular checkbox".

answered Feb 4, 2015 at 22:28

corvid

11.3k12 gold badges71 silver badges135 bronze badges

Collectives™ on Stack Overflow

checkboxes that append to a model in Angular.js

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related