javascript - 使用 Angularjs 多选 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>

Angular

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