javascript - 在 ng-repeat 中填充下拉值

Question

在填充 HTML 表内的下拉列表时，我遇到了 Angular 代码的问题(代码如下)。您能帮我解决在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:将您选择的 ng-model 更改为 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 .