SoFunction
Updated on 2025-04-04

Angular ng-repeat object and array traversal instances

Angular ng-repeat object and array traversal instances

Updated: September 14, 2016 09:14:03 Submission: lqh
This article mainly introduces the relevant information about Angular ng-repeat object and array traversal, and attaches code examples. Friends who need it can refer to it

Directly upload the code

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Ngrepeat in obj and arr]">
<script src="/ajax/libs//1.3.14/"></script>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>

 
 <div ng-app="myApp">
  <div ng-controller="testCtrl">{{test1}}
    <div>
      <label for="" ng-repeat="item in list1">{{}} -- {{}}</label>
      <p></p>
      
      <label for="" ng-repeat="(key, value) in obj1">{{key}} -- {{value}}</label>
      <p>
        
      </p>
      forobjIf you go through it Will be based onkeyAlphabetical order
      <label for="" ng-repeat="(key, value) in obj2">
        {{key}} -- {{}} -- {{}}
      </label>
      
    </div>
  </div>
</div>
 
 
</body>
</html>

JS

var app = (‘myApp‘, []);
(‘testCtrl‘, function ($scope) {
  $scope.test1 = ‘tt‘;
  $scope.list1 = [{
    id: ‘1‘,
    value: ‘seti‘
  }, {
    id: ‘2‘,
    value: ‘kuma‘
  }, {
    id: ‘3‘,
    value: ‘cent‘
  }];
  $scope.obj1 = {
    ‘1‘: ‘seti‘,
      ‘2‘: ‘kuma‘,
      ‘3‘: ‘cent‘
  };
  $scope.obj2 = {
    ‘ins‘:{text:‘seti‘, value:‘s1‘},
    ‘abc‘:{text:‘kuma‘, value:‘s2‘},
    ‘coln‘:{text:‘cent‘, value:‘s3‘}
  };
});
  • Angular
  • ng-repeat
  • Object and array traversal

Related Articles

  • Identify a region selection component using Ionic2 + angular4

    ionic is a mobile development framework. Using hybird technology, you can develop site programs on the computer, Android and iOS as long as you use front-end development technology. The following article mainly introduces relevant information about using Ionic2 + angular4 to implement a regional selection component. Friends who need it can refer to it. Let’s take a look together.
    2017-07-07

  • angularJS submit form (form)

    This article mainly introduces the methods and examples of angularJS submitting form (form). Friends who need it can refer to it.
    2015-02-02

  • Detailed explanation of angularjs using ui-route to load components asynchronously

    This article mainly introduces a detailed explanation of the asynchronous loading of angularjs using ui-route components, which has certain reference value. Interested friends can refer to it.
    2017-05-05

  • How to add serial numbers in AngularJS table

    This article mainly introduces the method of adding serial numbers in AngularJS table, which involves the traversal of AngularJS table and the implementation techniques for adding serial numbers. Friends who need it can refer to it
    2017-03-03

  • Angular 4 Dependency Injection Learning Tutorial: The Use of InjectToken (Eight)

    This article mainly introduces you to the relevant information about the use of InjectToken in Angular 4 dependency injection. The article introduces it in detail and has a certain reference learning value for everyone to learn or use Angular 4. If you need it, please follow the editor to learn and learn.
    2017-06-06

  • Detailed explanation of the difference between Angular entry component and declarative component

    This article mainly introduces you to the relevant information about the difference between Angular entry component and declarative component. The example code is introduced in this article in detail, which has certain reference learning value for everyone's study or work. Friends who need it, please learn with the editor below.
    2018-04-04

  • Augularjs-Detailed explanation of starting

    Below, the editor will bring you an Augularjs-detailed explanation. The editor thinks it is quite good, so I will share it with you now and give you a reference. Let's take a look with the editor
    2016-07-07

  • AngularJS implements data operations in separate scopes

    This article introduces how to use AngularJs to implement individual data binding in each small subscope in ng-repeat. Friends in need can refer to it, let’s take a look together below.
    2016-09-09

  • Use Angular material theme to define the color system of your own component library

    This article mainly introduces the relevant knowledge of using the Angular material theme to define the color system of your component library. This article introduces you very detailed and has certain reference value. Friends who need it can refer to it.
    2019-09-09

  • Problem of binding numeric types based on AngularJs select

    Today, the editor will share with you an issue of binding number types based on AngularJs select. It has good reference value and hope it will be helpful to everyone. Let's take a look with the editor
    2018-10-10

Latest Comments