Object.keys（）在NG選項不工作

我試圖用NG-選項來創建一個下拉列表：Object.keys（）在NG選項不工作

<!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不工作？

來源

2016-08-19 Anmol Singh Jaggi

更新
作爲禪宗的答覆中指出，其原因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>

編輯：（適用於回答）如果你想要的值選擇選項不成爲對象的值（例如，101,AngularJS等），喲您可以編寫<select ng-model="sortKey2" ng-options="key as key for (key,val) in books[0]">

來源

2016-08-19 16:33:16 Lex

太棒了！但爲什麼'Object.keys（）'不起作用？ –

您會發現表達式中的JavaScript函數的Angular支持有時會受到限制。這似乎是其中的一例。 – Lex

你可以添加這個答案嗎？另外，我在你的答案中增加了一些內容。只是驗證它是否正確，因爲我不是一個角度專家。 –

所有綁定表達式都將相對於$scope進行評估。所以當你寫for x in Object.keys(books[0])，角度運行它爲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]; 
    }); 
}])

來源

2016-08-19 17:01:26 Zen

啊，好電話。我的假設是Angular不理解Object.keys（），但是你對它所評估的上下文的解釋更有意義。但是，我不認爲使用'$ rootScope'是一個很好的解決方案，尤其是在'key'作爲（key，val）的關鍵字的情況下。 – Lex

Object.keys（）在NG選項不工作

回答

相關問題