您现在的位置是: 首页 » 网页代码 » angularjs如何遍历数组长度
网页代码

angularjs如何遍历数组长度

网站优化小编十一月 28, 2019 7人已围观

可以使用AngularJS的ng-repeat指令来循环遍历数组。ng-repeat指令用于循环输出指定次数的HTML元素。必须是数组或对象。

网站运营中栏目排名优化技巧

使用AngularJS的ng-repeat指令来循环遍历数组:

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Ngrepeat in obj and arr]">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></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">{{item.id}} -- {{item.value}}</label>
      <p></p>      
      <label for="" ng-repeat="(key, value) in obj1">{{key}} -- {{value}}</label>
      <p>         
      </p>
      对于obj遍历的话 会根据key的首字母排序
      <label for="" ng-repeat="(key, value) in obj2">
        {{key}} -- {{value.text}} -- {{value.value}}
      </label>       
    </div>
  </div>
</div>
</body>
</html>

js代码:

var app = angular.module(‘myApp‘, []);
app.controller(‘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‘}
  };
});

AngularJS ng-repeat 指令

ng-repeat 指令用于循环输出指定次数的 HTML 元素。

集合必须是数组或对象。

<element ng-repeat="expression"></element>

参数:

expression:表达式定义了如何循环集合。

表达式实例规则:

x in records
(key, value) in myObj
x in records track by $id(x)

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:218天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2965 条
  • 文章评论:17 条
  • 微信公众号:扫描二维码,关注我们