AngularJS无法使用ng-options动态填充下拉列表
萨钦
我正在显示一个包含用户信息的表，该表下面有一个输入框，用户可以在其中输入行索引，并基于行索引，我使用ng-options动态填充对象。
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)
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
无法使用 angularJs 动态填充下拉列表
- 2
使用Jinja从列表动态填充下拉列表
- 3
在AngularJS中动态填充下拉列表
- 4
使用JSON数据动态填充下拉列表
- 5
使用 AngularJS 填充下拉列表
- 6
动态使用数据库返回的数据填充下拉列表
- 7
如何在动态填充的下拉列表中使用jQuery设置下拉列表的选定文本或值
- 8
Angular js如何使用不带ng-options的JSON填充下拉列表
- 9
Angular js如何使用不带ng-options的JSON填充下拉列表
- 10
ng-options未填充选择选项下拉列表
- 11
如何使用AngularJS填充下拉列表值
- 12
无法使用php数组填充下拉列表
- 13
使用SQL填充下拉列表
- 14
使用反射填充下拉列表
- 15
使用填充数组动态创建的下拉列表不会使用angular更新
- 16
使用ng-change根据AngularJS中的另一个下拉列表填充一个下拉列表
- 17
使用JavaScript从PHP数组填充选项中动态创建的下拉列表
- 18
Jenkins Active Choices插件，使用属性文件动态填充下拉列表
- 19
使用JavaScript从PHP数组中填充带有选项的动态创建的下拉列表
- 20
angularjs ng-repeat中的动态互斥下拉列表
- 21
使用 PHP 动态下拉列表
- 22
使用Bootstrap动态填充下拉菜单
- 23
使用Bootstrap动态填充下拉菜单
- 24
在angularjs中填充下拉列表选择
- 25
AngularJS + Bootstrap：下拉列表未正确填充
- 26
Angularjs：根据用户输入填充下拉列表
- 27
使用ng-options在AngularJS中使用JSON填充select
- 28
填充的下拉列表无法正常工作
- 29
如何使用json数据动态填充下拉列表（将部分明智地放入三个不同的下拉列表中），并在单击时遇到操作
我来说两句