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

Object.keys() not working in ng-options

本文关键字：ng-options 不起作用 keys Object      更新时间：2023-09-26

我正在尝试使用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中使用生成的数组，从对象的键中获得下拉值。

我正在尝试创建case 1的效果。我在案例2的尝试不工作，但是在案例3中实现的类似事情正在工作。

谁能告诉为什么案例2不工作?

更新
正如禅宗的回答所指出的，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>

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

所有绑定表达式都相对于$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];
    });
}])
相关文章：