如何在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}}
  

  示例：可以更改限制的值以获得可迭代的元素(在这种情况下为对象)

    
  
      Angular first object in object
      
      
  
    
  
      
          
              
                  {{prop}}: {{value}}
              
          
      
      
          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;
          });
      
  
    

  输出：这是对象机构的第一个对象的元素(在上面的代码中提到)。
  

• 方法二：
  • 将对象的对象转换为对象的数组，并使用方括号([])的索引方法显示数组的第一个对象。

  句法：

  {{name_of_the array[index]}}

  示例：数组的第一个对象的索引值为0。由于数组的元素是对象，我们可以使用(。)运算符引用对象的属性。

    
  
      Angular first object in object
      
      
  
    
  
      
          The Name of the school is: {{institute[0].name}}
      
    
      
          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;
          });
      
  
    

  输出：这显示了对象机构的第一个对象的属性之一(在上面的代码中提到)。