返回介绍

内容渲染控制

发布于 2024-12-24 22:41:42 字数 1983 浏览 0 评论 0 收藏 0

7.2. 内容渲染控制

7.2.1. 重复 ng-repeat

这算是唯一的一个控制标签么……,它的使用方法类型于:

  <div ng-controller="TestCtrl">
    <ul ng-repeat="member in obj_list">
      <li>{ { member } }</li>
    </ul>
  </div>


  var TestCtrl = function($scope){
    $scope.obj_list = [1,2,3,4];
  }

除此之外,它还提供了几个变量可供使用:

  • `$index` 当前索引
  • `$first` 是否为头元素
  • `$middle` 是否为非头非尾元素
  • `$last` 是否为尾元素
  <div ng-controller="TestCtrl">
    <ul ng-repeat="member in obj_list">
      <li>{ { $index } }, { { member.name } }</li>
    </ul>
  </div>

  var TestCtrl = function($scope){
    $scope.obj_list = [{name: 'A'}, {name: 'B'}, {name: 'C'}];
  }

7.2.2. 赋值 ng-init

这个指令可以在模板中直接赋值,它作用于 `angular.bootstrap` 之前,并且,定义的变量与 `$scope` 作用域无关。

  <div ng-controller="TestCtrl" ng-init="a=[1,2,3,4];">
    <ul ng-repeat="member in a">
      <li>{ { member } }</li>
    </ul>
  </div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文