Angular Js- Is there any way to generate dynamically checkbox which are also preselected?

Question

I have been wandering for two to three hours and I found chunks of relevant questions but my scenario just take a little curve. I have to generate a number of checkboxes which obviously would be generated through ng-repeat. How can I show the preselected values which I am getting from Api. Here is the kind of data I am receiving.

Pre-selected data

$scope.categoriess = [{"id":1,"name":"Garden Cleaning"},{"id":3,"name":"Home Cleaning"}].

and this is the data over which I am using ng-repeat.

ng-repeat data

$scope.categories = [{"id":1,"name":"Garden Cleaning"},{"id":2,"name":"Gutter Cleaning"},{"id":3,"name":"Home Cleaning"},{"id":4,"name":"Pool Cleaning"}

HTML

  <div ng-repeat="cats in categories">
      <input type="checkbox" ng-model="categoriess.id[cats.id]">
               <label>{{cats.name}}</label>
                  </div>

Now how would i tell ng-repeat to check the preselected data, plus if I want to check few more boxes they should also be checked and I want them to store in $scope.categoriess. I have tried a number of solution either with ng-checked or by make a function call in ng-checked I got no expected results.

Mani S · Accepted Answer · 2017-06-05 17:10:46Z

1

Why don't u format your data to have another property, something like

{"id":1,"name":"Garden Cleaning", "checked": true}

Such way, when u iterate through the data, you can check the checkbox

<div ng-repeat="cats in categories">
  <input type="checkbox" ng-checked="cats.checked">
  <label>{{cats.name}}</label>
</div>

answered Jun 5, 2017 at 17:10

Mani S

2,5811 gold badge14 silver badges12 bronze badges

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

2 Comments

Usman Iqbal Over a year ago

thats why i posted this question, because it is what it is .

Mani S Over a year ago

There should be some references, if you know the default categories., then u can call a function in ng-checked to match the id and return true, but not redundant though!!

Usman Iqbal · Accepted Answer · 2017-06-05 20:27:54Z

1

I saw this but i did not know how it works god it saved my life. see this checklist-model. Its so simple , no need to use ng-checked or something dynamic , preselected and gets updated easily

[1]: http://jsfiddle.net/iem_usman/v3k6pwrj/1/

answered Jun 5, 2017 at 20:27

Usman Iqbal

2,4396 gold badges33 silver badges53 bronze badges

Comments

Sangwin Gawande · Accepted Answer · 2017-06-05 18:18:36Z

0

Change your html like this :

<div ng-repeat="cats in categories">
   <input type="checkbox" ng-model="categoriess.id[cats.id]" ng-checked="isChecked(cats.id);">
   <label>{{cats.name}}</label>
</div>

Add this function in your controller :

$scope.selectedCategoriess = [{"id":1,"name":"Garden Cleaning"},{"id":3,"name":"Home Cleaning"}].

$scope.isChecked = function(id){
for (var i = 0; i < $scope.selectedCategoriess.length; i++) {
    if ($scope.selectedCategoriess[i].id == id) {
        return true;
    }
}
return false;
}

If id is available checked value will be "true".

answered Jun 5, 2017 at 18:18

Sangwin Gawande

8,2348 gold badges52 silver badges67 bronze badges

5 Comments

Usman Iqbal Over a year ago

what does this line means ? ng-model="categoriess.id[cats.id]"

Sangwin Gawande Over a year ago

It's in your code, I only added ng-checked function

Usman Iqbal Over a year ago

There was an error coming on this line for (var i = 0; i < $scope.selectedCategoriess.length; i++) length of undefined, when i set $scope.selectedCategoriess as dynamic but i handle it and fixed it, by writting if($scope.selectedCategoriess){for......}

Usman Iqbal Over a year ago

I tried your solution before, but at that time i did not use ng-model="categoriess.id[cats.id]"

Sangwin Gawande Over a year ago

I have implemented same solution in my application, works fine.

Collectives™ on Stack Overflow

Angular Js- Is there any way to generate dynamically checkbox which are also preselected?

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related