Object.keys() 在 ng-options 中不起作用

Question

我正在尝试使用 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 的效果。我在 case 2 中的尝试没有用，但是在 case 3 中实现的类似的东西正在工作。

谁能说出 案例 2 不起作用的原因？

Answer 1

更新
如 Zen 的回答所示，Object.keys() 在 ng-repeat 中不起作用的原因是由于评估它的上下文（即 $scope 的上下文）。

Angular 以 (key, val) 的形式内置了此功能。有时 Angular 表达式中对本机 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>

EDIT：（应用于回答）如果您希望select选项的值不成为值对象的（例如 101、AngularJS 等），您可以写 <select ng-model="sortKey2" ng-options="key as key for (key,val) in books[0]">

Answer 2

所有绑定表达式都是相对于 $scope 计算的。因此，当您编写 for x in Object.keys(books[0]) 时，angular 将其运行为 for( x in $scope.Object.keys([books[0]) )。显然， Object 没有在范围链中定义。如果你想让它工作，你可以将所有全局变量复制到$rootScope，这似乎不是一个坏习惯。

m1.run([`$rootScope`, function($rootScope){
    var keys  = Object.getOwnPropertyNames( window );
    keys.forEach( key => {
        $rootScope[key] = window[key];
    });
}])

Object.keys() 在 ng-options 中不起作用

Object.keys() not working in ng-options

javascript

html-select

angularjs

drop-down-menu

ng-options