I'm displaying a table with user information , below this table there is a input box where user can enter the row index and based on the row index, i'm populating the object dynamically using ng-options.
HTML UI
After populating dropdown
After populating dropdown list, all the labels are undefined. Not sure what is the issue.
// html file -
<html>
<head>
<title>AngularFilter</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../lib/angular.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="styles.css" />
</head>
<body ng-app="filter">
<div ng-controller="filterController">
<table>
<thead>
<tr>
<th>Index</th>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in data">
<th>{{$index + 1}}</th>
<th>{{employee.name | lowercase}}</th>
<th>{{employee.dob | date:"dd/MM/yyyy"}}</th>
<th>{{employee.gender| uppercase}}</th>
<th>{{employee.salary | number:2}}</th>
</tr>
</tbody>
</table>
<br>
<input type="text" placeholder="Enter the index of array" ng-model="idx" ng-blur="getSelectedIndex()" />
<select ng-model="element" ng-options="{{optionString}}" >
<option value="">select option</option>
</select>
</div>
</body>
//app.js
var module = angular.module("filter", []);
module.controller("filterController", function($scope) {
$scope.elements={};
$scope.optionString = "e[name] for e in elements";
var data = [
{
name:"Robin",
dob:new Date("March, 23, 1980"),
gender:"male",
salary:70000
},
{
name:"John",
dob:new Date("January, 23, 1981"),
gender:"male",
salary:65000
},
{
name:"Ruby",
dob:new Date("March, 24, 1982"),
gender:"female",
salary:55000
}
]
$scope.data = data;
$scope.getSelectedIndex = function() {
var index = $scope.idx - 1;
var obj = $scope.data[index];
for(o in obj) {
$scope.elements[o] = obj[o];
}
console.log($scope.elements)
}
});
console.log($scope.elements)shows?