VA31 VA31 - 6 months ago 52
AngularJS Question

Populate dropdown value inside ng-repeat

I am facing an issue with my Angular code, while populating the dropdown inside a HTML table (Code given below).
Could you please help me with what should be done inside modify() to populate the dropdown ?

HTML Code:

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

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

};
});


My problem is I am NOT able to populate the dropdown with the existing value, as show in the diagram below:
enter image description here

Answer

I made this plunker, check if it's what you need.

1: Both status are with id 1. Change them

From:

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

To:

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

2:Change your select ng-model to emp.status.id.

From:

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

To:

<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: Change your buttons ng-hide/ng-show

From:

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

To:

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

Update: As @Rajesh said below you can store the status_id instead of entire status object.
Check his fiddle.