如何在AngularJS中选择对象中的第一个对象

我们要处理的主要问题是，对于一个对象的对象来说，读取一个特定索引位置的对象并不像列表那样简单。我们不能用ngFor来循环，因为对象不被认为是一个可迭代的。当从任何来源收到的数据是一个包含对象（如JSON文件）的对象时，这个问题的重要性可能会出现。
改变源文件是非常不方便的，所以我们需要能够在应用程序本身做一些事情。最有效的方法是隐藏在问题本身中。如果对象不是可迭代的，就把它们转换成可迭代的。

下面将讨论两种方法来解决这个问题。

步骤 1:
使用ng-repeat指令和limitTo过滤器。
ng-repeat能够迭代对象的属性，在我们的例子中，对象本身就是属性。使用的语法如下。

< div ng-repeat="(key, value) in myObj" > ... < /div >

limitTo过滤器创建一个新的数组或字符串，只包含指定数量的元素。这些元素从源数组、字符串或数字的开头或结尾处抽取，由limit的值和符号（正或负）指定。

语法:

html binding:
    {{ limitTo_expression | limitTo : limit : begin}}

例子：限制的值可以被改变，以获得可迭代的元素（本例中为对象）。

<!DOCTYPE html>
    <html>
      
    <head>
        <title>Angular first object in object</title>
        <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
        </script>
    </head>
      
    <body ng-app='MyApp' 
          ng-controller='MyCtrl'>
        <div ng-repeat="(key, obj) in institute | limitTo : 1">
            <ul>
                <li ng-repeat="(prop, value) in obj">
                    {{prop}}: {{value}}
                </li>
            </ul>
        </div>
        <script>
            var app = angular.module('MyApp', []);
            app.controller('MyCtrl', function(scope) {
                scope.institute = {
                    'school': {
                        location: 'Jamshedpur',
                        name: 'RV'
                    },
                    'college': {
                        location: 'Kolkata',
                        name: 'Jadavpur'
                    }
                };
                var instilist = new Array();
                for (key of Object.keys(scope.institute)) {
                    instilist.push(scope.institute[key]);
                }
                $scope.institute = instilist;
            });
        </script>
    </body>
      
    </html>

输出：这是对象研究所的第一个对象的元素（在上述代码中提到）。
如何在AngularJS中选择对象中的第一个对象？

步骤 2:
将对象的对象转换成对象的数组，并使用方括号([])的索引方法来显示数组的第一个对象。

语法:

{{name_of_the array[index]}}

例子：数组中第一个对象的索引值为0。由于数组的元素是对象，我们可以使用(.)操作符来引用对象的属性。

<!DOCTYPE html>
<html>
  
<head>
    <title>Angular first object in object</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script>
</head>
  
<body>
    <div ng-app="MyApp" ng-controller="MyCtrl">
        <p>The Name of the school is: {{institute[0].name}}</p>
    </div>
  
    <script>
        var app = angular.module('MyApp', []);
        app.controller('MyCtrl', function(scope) {
            scope.institute = {
                school: {
                    location: 'Jamshedpur',
                    name: 'RV'
                },
                college: {
                    location: 'Kolkata',
                    name: 'Jadavpur'
                }
            };
            var instilist = new Array();
            for (key of Object.keys(scope.institute)) {
                instilist.push(scope.institute[key]);
            }
            $scope.institute = instilist;
        });
    </script>
</body>
  
</html>