Question

我在使用Angular代码时遇到问题，同时填充HTML表格中的下拉列表（下面给出的代码）。你能帮我解决一下在modify（）里面应该做什么来填充下拉列表吗？

HTML代码：

<table class="table" ng-app="empApp" ng-controller="employeeController">
<thead>
    <tr class="info">
        <th>Emp Name</th>
        <th>Status</th>
        <th colspan="2">&nbsp;</th>
    </tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees">
  <td>
    <div ng-hide="editingData[emp.id]">{{ emp.name }}</div>
    <div ng-show="editingData[emp.id]"><input type="text" ng-model="emp.name" /></div>
    </div>
  </td>
  <td>
    <div ng-hide="editingData[emp.id]">{{ emp.status.name }}</div>
    <select ng-show="editingData[emp.id]" class="form-control" ng-model="emp.status" 
    ng-options="status.id  as status.name for status in statuses"></select>
  </td>
  <td colspan="2">
    <div class="btn-group">
        <button type="submit" class="btn btn-primary" ng-hide="editingData[employee.id]" ng-click="modify(emp)">Modify</button>&nbsp;
        <button type="submit" class="btn btn-primary" ng-show="editingData[employee.id]" ng-click="update(emp)">Update</button>&nbsp;
    </div>
 </td>
</tr>
</tbody>
</table>

Javascript代码：

    var empApp = angular.module("empApp", []);
    empApp.controller('employeeController', function($scope, $http) {

    $scope.statuses = [{"id":1,"name":"Active"}, {"id":1,"name":"Inactive"}];

    $scope.employees = [{"id":1,"name":"Mark","status":{"id":1,"name":"Active"}},{"id":2,"name":"Sara","status":{"id":2,"name":"Inactive"}}]; 
    $scope.editingData = {};

    for (var i = 0, length = $scope.employees.length; i < length; i++) {
        $scope.editingData[$scope.employees[i].id] = false;
    }

    $scope.modify = function(employee){
        $scope.editingData[employee.id] = true;
        //Set Employee Status correctly here to populate the dropdown

    };
  });

我的问题是我无法使用现有值填充下拉列表，如下图所示：

Answer 1

我做了this plunker，检查它是否是你需要的。

1：状态均为ID 1.更改

自：

$scope.statuses = [{"id":1,"name":"Active"}, {"id":1,"name":"Inactive"}];

要：

$scope.statuses = [{"id":1,"name":"Active"}, {"id":2,"name":"Inactive"}];

2：将您的选择模型更改为emp.status.id。

自：

<select ng-show="editingData[emp.id]" class="form-control" ng-model="emp.status" 
    ng-options="status.id  as status.name for status in statuses"></select>

要：

<select ng-show="editingData[emp.id]" class="form-control" ng-model="emp.status.id" 
    ng-options="status.id  as status.name for status in statuses"></select>

3：更改按钮ng-hide / ng-show

自：

<div class="btn-group">
    <button type="submit" class="btn btn-primary" ng-hide="editingData[employee.id]" ng-click="modify(emp)">Modify</button>&nbsp;
    <button type="submit" class="btn btn-primary" ng-show="editingData[employee.id]" ng-click="update(emp)">Update</button>&nbsp;
</div>

要：

<div class="btn-group">
    <button type="submit" class="btn btn-primary" ng-hide="editingData[emp.id]" ng-click="modify(emp)">Modify</button>&nbsp;
    <button type="submit" class="btn btn-primary" ng-show="editingData[emp.id]" ng-click="update(emp)">Update</button>&nbsp;
</div>

更新：正如@Rajesh所说，您可以存储status_id而不是整个状态对象。
检查his fiddle。

Answer 2

只需用此代码替换您的选择标记部分

<select ng-show="editingData[emp.id]" class="form-control" ng-model="emp.status" 
    ng-options="status as status.name for status in statuses track by status.id"></select>

这是因为在ng-model中，您传递的是完整对象，并且您需要通过ID跟踪完整对象，以便填充下拉列表以及要选择的相关下拉列表值

同样在你的按钮中：

<div class="btn-group">
        <button type="submit" class="btn btn-primary" ng-hide="editingData[emp.id]" ng-click="modify(emp)">Modify</button>&nbsp;
        <button type="submit" class="btn btn-primary" ng-show="editingData[emp.id]" ng-click="update(emp)">Update</button>&nbsp;
    </div>

因为你在ng-repeat中引用'emp'而不是'employee'，因为它是动态的

Answer 3

你正在循环

<tr ng-repeat="emp in employees">

但是在选择列表中，您将根据以下内容进行切换：

editingData[employee.id]

尝试将其更改为

editingData[emp.id]

Answer 4

在你的按钮中使用emp.id，也在你的修改功能和循环中使用使用$ scope.employees [i] .isVisible = false和ng-hide = $ scope.employees.isVisible ng-show = $ scope.employees.isVisible

填充ng-repeat内的下拉值

4 个答案: