CODEWITHSUNDEEP
angularjs
tengen
tengen

Reputation: 2165

Having a set of checkboxes map to a nested array

I am working on a SPA that pulls in customer data from one $resource call, and gets some generic preference data from another $resource call.

The preference data is sent as an array, which I want to use to populate a series of checkboxes, like so:

<div ng-repeat="pref in fieldMappings.mealPrefs">
  <input type="checkbox"
          id="pref_{{$index}}"
          ng-model="customer.mealPrefs"
          ng-true-value="{{pref.name}}" />
  <label class="checkbox-label">{{pref.name}}</label>
</div>

When a user clicks one or more checkboxes, I want the values represented in that array of checkboxes to be mapped to an array nested inside a customer object, like so:

.controller( 'AppCtrl', function ( $scope, titleService, AccountDataService ) {

  // this is actually loaded via $resource call in real app
  $scope.customer = {
    "name": "Bob",
    "mealPrefs":["1", "3"]
  };

  // this is actually loaded via $resource call in real app    
  $scope.fieldMappings.mealPrefs = [
      {'id':"1", 'name':"Meat"},
      {'id':"2", 'name':"Veggies"},
      {'id':"3", 'name':"Fruit"},
      {'id':"4", 'name':"None"}
  ];
});

I have tried setting up ng-click events to kick off functions in the controller to manually handle the logic of filling the correct part of the customer object model, and $watches to do the same. While I have had some success there, I have around 2 dozen different checkbox groups that need to be handled somehow (the actual SPA is huge), and I would love to implement this functionality in a way that is very clean and repeatable, without duplicating lots of click handlers and setting up lots of $watches on temporary arrays of values. Anyone in the community already solved this in a way that they feel is pretty 'best practice'?

I apologize if this is a repeat - I've looked at about a dozen or more SO answers around angular checkboxes, and have not found one that is pulling values from one object model, and stuffing them in another. Any help would be appreciated.

On a side-note, I'm very new to plunkr (http://plnkr.co/edit/xDjkY3i0pI010Em0Fi1L?p=preview) - I tried setting up an example to make it easier for folks answer my question, but can't get that working. If anyone wants to weigh in on that, I'll set up a second question and I'll accept that answer as well! :)

Upvotes: 1

Views: 1086

Answers (2)

Zack Argyle
Zack Argyle

Reputation: 8427

Here is a JSFiddle I put together that shows what you want to do. http://jsfiddle.net/zargyle/t7kr8/

It uses a directive, and a copy of the object to display if changes were made.

Upvotes: 1

Hippocrates
Hippocrates

Reputation: 2540

I would use a directive for the checkbox. You can set the customer.mealPrefs from the directive. In the checkbox directive's link function, bind to the "change" event and call a function that iterates over the customer's mealPrefs array and either adds or removes the id of the checkbox that is being changed.

I took your code and wrote this example: http://plnkr.co/edit/nV4fQq?p=preview

Upvotes: 0

Related Questions