Using Angularjs multiselect isteven
Trying to include Angularjs multiselect in my project, however, whenever I try to fetch data from my mysql database, only the last entry is shown.
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@gmail.com",
"personnel": "Johnny Depp"
},
{
"id": 2,
"title": "Shift 2",
"email": "email2@gmail.com"
"personnel": "Napoleon Bonaparte"
}
]
In the example, the last object in the array of objects above only shows the last object and I need them all to be displayed.
Essentially, the output I get is
+3
source to share
1 answer
You are doing a loop forEach
where you set the array value each time, clearing out the previous value. Instead, you want:
- Initialize the array
$scope.allPersonnelGrouped
using the initial menu items ("All shifts", etc.). - Loop over the array
$scope.groupedShifts
and add items to$scope.allPersonnelGrouped
to populate the shift group members - Close the menu groups after the loop
I spent a few minutes on the directive multiselect
, 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 }
);
+1
source to share