我正在尝试使用 ng-options 创建一个下拉列表:
<!DOCTYPE html>
<html ng-app="m1">
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js'></script>
</head>
<body ng-controller="c1">
<div>
Sort1
<select ng-model="sortKey1">
<option value="bookId">By Id</option>
<option value="bookTitle">By Title</option>
<option value="cost">By Cost</option>
</select>
</div>
<div>
Sort2
<select ng-model="sortKey2" ng-options="x for x in Object.keys(books[0])">
</select>
</div>
<div>
Sort3
<select ng-model="sortKey3" ng-options="x for x in bookKeys">
</select>
</div>
</body>
<script type="text/javascript">
var m1 = angular.module("m1", []);
m1.controller('c1',function($scope)
{
$scope.books = [
{
"bookId": 101,
"bookTitle": "Angular JS",
"cost":375,
},
{
"bookId": 102,
"bookTitle": "Instant AngularJS Starter",
"cost":150,
},
{
"bookId": 103,
"bookTitle": "Ng-Book: The Complete Book on AngularJS",
"cost":4657,
}];
console.log(Object.keys($scope.books[0]));
$scope.bookKeys = Object.keys($scope.books[0]);
});
</script>
</html>
我试图通过在对象上调用 Object.keys() 然后在 ng-options 中使用结果数组来从对象的键中获取下拉值。
我正在尝试创建案例 1 的效果。我在案例 2 中的尝试没有奏效，但是在案例 3 中实现的类似的事情正在奏效。
谁能说出案例 2 不起作用的原因？
最佳答案
更新
如 Zen 的回答所示，Object.keys() 在 ng-repeat 中不起作用的原因是由于评估它的上下文(即 $scope 的上下文)。
Angular 以 (key, val) 的形式内置了这个功能。有时，Angular express 中对 native javascript 函数的支持是有限的，在这种情况下，Angular 可能无法将 Object.keys() 理解为 ng-options 的来源。将案例 2 中的 <select> 更改为:
<select ng-model="sortKey2" ng-options="key as key for (key,val) in books[0]">
工作示例:
var m1 = angular.module("m1", []);
m1.controller('c1', function($scope) {
$scope.books = [{
"bookId": 101,
"bookTitle": "Angular JS",
"topic": "AngularJS",
"author": "Green",
"cost": 375,
}, {
"bookId": 102,
"bookTitle": "Instant AngularJS Starter",
"topic": "AngularJS",
"author": "Dan Menard",
"cost": 150,
}, {
"bookId": 103,
"bookTitle": "Ng-Book: The Complete Book on AngularJS",
"topic": "AngularJS",
"author": "Ari Lerner",
"cost": 4657,
}];
console.log(Object.keys($scope.books[0]));
$scope.bookKeys = Object.keys($scope.books[0]);
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="m1" ng-controller="c1">
<div>
Sort1
<select ng-model="sortKey1">
<option value="bookId">By Id</option>
<option value="bookTitle">By Title</option>
<option value="topic">By Topic</option>
<option value="author">By Author</option>
<option value="cost">By Cost</option>
</select>
</div>
<div>
Sort2
<select ng-model="sortKey2" ng-options="key as key for (key,val) in books[0]">
</select>
</div>
<div>
Sort3
<select ng-model="sortKey3" ng-options="x for x in bookKeys">
</select>
</div>
</div>编辑:(应用于回答)如果您希望选择选项的值不成为对象的值(例如 101 、 AngularJS 等。 ), 你可以写成 <select ng-model="sortKey2" ng-options="key as key for (key,val) in books[0]">
关于javascript - Object.keys() 在 ng-options 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39043796/