AngularJs ng-repeat指令

这指令很屌。有了它可以不用脚本遍历数组,直接在html中实现数组遍历数组输出数组中内容。

当数组为基本类型:

ng-repeat =“x in dataset”

当数组为k/v形式

ng-repaet=“(k/v) in dataset”

内言表达式

说明:

1.x相当于一个容器,每编历一次返回后输出,并自动生成新的标签

2.dataset是数组

用例:

<div ng-app=“data-app” ng-controller=“data-ctrl”>

<p ng-model=“names”></p>

<p ng-repeat=“x in names”>{{x}}</p>

</div>

//用脚本给数组names赋值

<script>

var app = angular.module(“data-app”,[]);

app.controller(“data-ctrl”,[“$scope”function($scope){

    $scope.names=[“xzh”,”co”];

}]);

输出:xzh     

        co

</script>

这个指令用脚本实现是这样的:

<script>

var dataset =[1,2,3,4];

function opdata(){

      for(i=0;i<dataset.length;i++) {

          document.getElementBy    Id(“p”).innerHTML=dataset[i];

        ……此处省略创建节点代码100行   

      }

  }

</script>

AngularJs十分方便,不要看上面那么多代码,但是实际上绝大部份都是构建页面必须的,说得明白一点就是“这些代码怎么都得写”。AngularJs只需在页面的代码基础上稍左修改和增加即可方便过用原生js甚至jquery。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 840评论 0 3
  • 简介: AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。 Ang...
    JenniferYe阅读 1,036评论 0 13
  • ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:...
    壬万er阅读 414评论 0 2
  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 1,284评论 1 21
  • AngularJSAngularJS 是一个 MV* 框架, 最适于开发客户端的单页面应用。它不是个功能库,...
    一直以来都很好阅读 568评论 0 0