使用Angularjs multiselect isteven

Question

尝试将Angularjs multiselect合并到我的项目中，但是，每当我尝试从我的mysql数据库中提取数据时，只显示最后一条记录。

---

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 }
        ];

    });

});

对象数组

[
   {
      "id": 1,
      "title": "Shift 1",
      "email": "email@gmail.com",
      "personnel": "Johnny Depp"
   },
   {
      "id": 2,
      "title": "Shift 2",
      "email": "email2@gmail.com"
      "personnel": "Napoleon Bonaparte"
   }

]

---

在示例中，上面对象数组中的最后一个对象，只显示了最后一个对象，我需要显示所有这些对象。

基本上我得到的输出是

Answer 1

您正在进行forEach循环，每次都会设置数组的值，从而消除先前的值。相反，你想：

1. 使用初始菜单项（“All Shifts”等）初始化数组$scope.allPersonnelGrouped
2. 遍历$scope.groupedShifts数组，并将项目添加到$scope.allPersonnelGrouped以填写班组成员
3. 循环后，关闭菜单组

我只花了几分钟看multiselect指令，所以这可能不是你想要的。

// 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 }
);