使用angularjs laravel在选择框中显示存储在数据库中的选定项目

Question

我试图将数据库中的存储值放入选择框，但它没有显示。所选值显示在控制台（检查元素）中，但它不显示。

HTML

<td data-ng-class="{'has-error': employeeSchedule.employee.$invalid && employeeSchedule.employee.$dirty}">
    <select class="form-control input-sm" name="employee" ng-model="schedule.employee" ng-init="schedule.employee='{{$schedules[0]->employee}}'" ng-options="employee.employeeName for employee in employeesName track by employee.usersId">
        <option value="">Select Employee</option>
    </select>
</td>

---

ANGULARJS

app.controller('UpdateWorkScheduleCtrl', [ '$scope', '$http', function ($scope, $http)
{
    $http.get('/schedule/employees').success(function(employeedata) {
        $scope.employeesName = employeedata;
    });
}]);

---

控制器（LARAVEL）

public function getEmployees() {

    $users = DB::select(DB::raw("SELECT `usersId`, CONCAT(`firstName`,' ',`middleName`,' ',`lastName`) AS employeeName 
                                 FROM `users` 
                                 WHERE `userStatus` != 'Administrator' 
                                 AND `userStatus` != 'Director' 
                                 AND `userStatus` != 'HR Specialist'"));

    return Response::json($users);
} // end function getEmployees()

---

检查元素（CHROME）

从inspect元素中可以清楚地看到数据存在，但它并没有显示为选择框中的选定项目。有人可以告诉我我做错了吗。

Answer 1

您的ng-options表达式与您需要的表达式不匹配。您在语法track by employee.usersId中有employee.employeeName for employee in employeesName track by employee.usersId，这意味着您需要将ng-model设置为userId而不是name，并且还需要将其设置为不仅仅是字符串的对象，即理想情况下你的ng-model应该是schedule.employee = {usersId:'someid'}用于默认选择。现在来看你的情况，你似乎正在尝试将ng-model设置为字符串，并且你想要它的雇员名称（这可能是一个糟糕的选择，因为你已经有一个id）你应该尝试使用替代语法select as label for value in array`：

ng-options="employee.employeeName as employee.employeeName for employee in employeesName "

另外请记住，当您使用select作为语法时，您应该删除track by，因为它们不是为了协同工作而设计的。

旁注： -

使用ng-init初始化ng-mode是个坏主意。医生说：

  

ngInit的唯一合适用途是用于别名ngRepeat的特殊属性，如下面的演示所示。除了这种情况，您应该使用控制器而不是ngInit来初始化作用域上的值。