Using Angularjs multiselect isteven

Question

Trying to incorporate Angularjs multiselect into my project, however, whenever I try to pull the data from my mysql database, only the last record is being displayed.

html

<div isteven-multi-select
     input-model="allPersonnelGrouped"
     output-model="groupedOutput"
     button-label="icon name"
     item-label="icon name maker"
     tick-property="ticked"
     max-height="250px" 
     group-property="msGroup">
</div>

angularjs

$http.get('/messages/shifts').success(function(data) {

    $scope.groupedShifts = data;


    angular.forEach( $scope.groupedShifts, function( groupShift ) {

        $scope.allPersonnelGrouped = [
           { name: '<strong>All Shifts</strong>', msGroup: true },
           { name: '<strong>' + groupShift.title + '</strong>', msGroup: true },
           { icon: '', name: groupShift.personnel, maker: '(' + groupShift.email + ')', ticked: false },
           { msGroup: false },
           { msGroup: false }
        ];

    });

});

array of objects

[
   {
      "id": 1,
      "title": "Shift 1",
      "email": "[email protected]",
      "personnel": "Johnny Depp"
   },
   {
      "id": 2,
      "title": "Shift 2",
      "email": "[email protected]"
      "personnel": "Napoleon Bonaparte"
   }

]

In the example the last object in the array of objects above, only the last object is shown and I need all of them to be displayed.

Essentially the output I am getting is

enter image description here

Only the last object is show because inside the forEach loop you are creating a new array each time it executes. I was typing this as an answer (and w/a solution), but in doing so I realized I wasn't sure what your resulting array should look like. Should it be an array of objects (as you've shown above), or perhaps an array of arrays, where the inner array contains objects? — Sunil D.
– Sunil D., Commented Apr 20, 2015 at 16:00
what would you suggest I do in order to access each property and display all the needed data? @Sunil D. — user2538755
– user2538755, Commented Apr 20, 2015 at 16:46

user2538755 · Accepted Answer · 2015-04-20 18:08:45Z

1

You are doing a forEach loop where you set the value of an array each time, wiping out the prior value. Instead, you want to:

Initialize the array $scope.allPersonnelGrouped with the initial menu items ("All Shifts", etc.)
Loop over the $scope.groupedShifts array and add items to $scope.allPersonnelGrouped to fill in the members of shift group
After the loop, close the menu groups

I've only spent a few minutes looking at the multiselect directive, so this may not be exactly what you want.

// initialize the array
$scope.allPersonnelGrouped = [
  { name: '<strong>All Shifts</strong>', msGroup: true } 
];

angular.forEach( $scope.groupedShifts, function( groupShift ) {
  // populate the dynamic portion of the array
  $scope.allPersonnelGrouped.push(
    { name: '<strong>' + groupShift.title + '</strong>', msGroup: true }
  );

  $scope.allPersonnelGrouped.push(
    { icon: '', name: groupShift.personnel, maker: '(' + groupShift.email + ')', ticked: false }
  );
  $scope.allPersonnelGrouped.push({ msGroup: false });
});

// close the menu groups
$scope.allPersonnelGrouped.push(
  { msGroup: false }
);

edited Apr 20, 2015 at 18:08

user2538755

3141 gold badge7 silver badges21 bronze badges

answered Apr 20, 2015 at 17:06

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

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

2 Comments

user2538755 Over a year ago

I was trying something similar, and your answer is almost exactly what I was looking for. its just that groupShift.title would be within the foreach loop (I'm assuming) or it would be undefined. All Shift does nothing when trying to select it though, and if i put groupShift.title within the foreach loop, it does what All Shift is supposed to do & that is selecting all shifts within the list. @Sunil D.

user2538755 Over a year ago

Figured it out. Thanks for a great response @Sunil D.

Collectives™ on Stack Overflow

Using Angularjs multiselect isteven

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related