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 express中对原生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>

编辑 :( 应用于回答）如果您希望select选项的值不会成为对象的值（例如{。{1}} ，101等），您可以写AngularJS

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中不起作用

2 个答案: