html - 使用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;
    });
}]);

---

Controller (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 elements 可以清楚地看到数据在那里，但它只是没有显示为选择框中的选定项。请有人告诉我我做错了什么。

Answer 1

您的 ng-options 表达式与您需要的不匹配。您在语法中有 track by employee.usersId employee.employeeName for employee in employeesName track by employee.usersId，这意味着您需要将 ng-model 设置为 userId而不是名称，也作为对象而不仅仅是字符串，即您的 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 as 语法时，您应该删除 track by，因为它们不是为协同工作而设计的。

旁注:-

使用ng-init 是个坏主意用于初始化 ng 模式。医生说:

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.