Javascript 在ng repeat中填充下拉列表值

在填充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>

    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

    };
  });

Emp名称
地位
{{emp.name}
{{emp.status.name}
修改
更新

Javascript代码：

<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>

    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

    };
  });

var-empApp=angular.module（“empApp”，[]）；
emapp.controller（'employeeController'，函数（$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={}；
对于（var i=0，length=$scope.employees.length；i

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

---

您正在循环

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

试着把它改成

editingData[emp.id]

---

你在绕圈子

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

试着把它改成

editingData[emp.id]

---

在按钮以及修改函数和循环中使用emp.id

---

使用$scope.employees[i].isVisible=false和ng hide=$scope.employees.isVisible ng show=$scope.employees.isVisible

在按钮以及修改函数和循环中使用emp.id 使用$scope.employees[i].isVisible=false和ng hide=$scope.employees.isVisible ng show=$scope.employees.isVisible，检查它是否是您需要的

1：两种状态的id均为1。更改它们

发件人：

致：

2：将您选择的ng型号更改为emp.status.id.

发件人：

致：

3：更改按钮ng hide/ng show

发件人：

修改
更新

致：

修改
更新

更新： 正如@Rajesh在下面所说的，您可以存储status_id，而不是整个status对象<检查。

我做的，检查一下是否是你需要的

1：两种状态的id均为1。更改它们

发件人：

致：

2：将您选择的ng型号更改为emp.status.id.

发件人：

致：

3：更改按钮ng hide/ng show

发件人：

修改
更新

致：

修改
更新

更新：

---

正如@Rajesh在下面所说的，您可以存储status_id，而不是整个status对象
检查。

只需用此代码替换您的选择标记部件即可

<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模型中，您传递的是完整对象，需要通过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>

修改
更新

---

因为您是通过“emp”而不是ng内的“employee”引用它的，所以重复，因为它将是动态的

<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模型中，您传递的是完整对象，需要通过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”引用它，因为它将是动态的，所以在您的按钮中它是

editingData[employee.id]

，它应该是

editingData[emp.id]

，不是吗？您在下拉列表中面临的问题是什么？这是否应该

ng hide=“editingData[employee.id]”“

not be

ng hide=“editingData[emp.id]”

您可以检查这个。在您的按钮中，它是

editingData[employee.id]

，应该是

editingData[emp.id]

不是吗？您在下拉列表中面临的问题是什么？这应该是

ng hide=“editingData[employee.id]”

吗您可以检查此项。不工作-这边-不工作-这边-只有一个指针。最好存储status_id，而不是整个status对象。只有一个指针。最好存储status_id，而不是整个status对象。

<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>