0
私はユーザ情報を持つテーブルを表示しています。このテーブルの下には、ユーザが行インデックスを入力でき、行インデックスに基づいてng-optionsを使用して動的にオブジェクトを作成します。ng-optionsを使用してAngularjsが動的にドロップダウンを設定できない
HTML UI
ドロップダウンリストを移入した後、ドロップダウン
を移入した後、すべてのラベルが定義されていません。問題が何であるか分かりません。
// htmlファイル -
<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）'ショー？ – SaiUnique