Question

是否有方便的方法从AngularJS表达式中只有一个键的对象读取键/值？以下是一个例子。

<div ng-app="app" ng-controller="ctrl">
    <span>{{me.key}}</span> //I want: <span>name</span>
    <span>{{me.value}}</span> //I want: <span>Ealon</span>
</div>

angular.module("app", [])
    .controller("ctrl", function($scope) {
        $scope.me = {
            "name": "Ealon" //This object contains only one key
        };
    })

使用ng-repeat显示键/值对是一种解决方案。但不幸的是，由于某些原因，我不能在这里使用ng-repeat。

另一种我认为不方便的解决方案是：

<div ng-app="app" ng-controller="ctrl">
    <span>{{meCopy.key}}</span>
    <span>{{meCopy.value}}</span>
</div>

angular.module("app", [])
    .controller("ctrl", function($scope) {
        $scope.me = {
            "name": "Ealon"
        };

        var meKey = Object.getOwnPropertyNames($scope.me)[0];
        var meValue = $scope.me[meKey];

        $scope.meCopy = {
            "key": meKey,
            "value": meValue
        };
    })

有没有更简单的方法呢？谢谢你的帮助！

Answer 1

但不幸的是，由于某种原因，我不能在这里使用ng-repeat。

可能您试图将ng-repeat指令放在与ng-controller指令相同的元素上。这两个指令都会创建范围并相互争斗。

ng-repeat指令需要与ng-controller指令不同的元素。

<div ng-app="app" ng-controller="ctrl">
     <div ng-repeat="(key, value) in me">
        <span>{{key}}</span>
        <span>{{value}}</span>
     </div>
</div>

通过将两个指令放在不同的元素上，ng-repeat创建的作用域将正确地从ng-controller指令创建的作用域继承。

DEMO on JSFiddle

Answer 2

不确定为什么你不能使用ng-repeat，但另一种选择是使用Object.keys来获取对象的第一个属性，例如：

<div ng-app="app" ng-controller="ctrl">
  <span>{{getFirstPropertyKey(me)}}</span>
  <span>{{getFirstPropertyValue(me)}}</span>
</div>

angular.module("app", [])
  .controller("ctrl", function($scope) {
      $scope.me = {
          "name": "Ealon" //This object only contains one key
      };

      $scope.getFirstPropertyKey = function(obj){
        return Object.keys(obj)[0];
      }

      $scope.getFirstPropertyValue = function(obj){
        return obj[Object.keys(obj)[0]];
      }
  });

使用AngularJS表达式

2 个答案: