ng-repeat

作者: 琳媚儿 | 来源:发表于2019-12-22 20:27 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="test">
<div ng-controller="count">
   <ul>
        <li ng-repeat="item in items">
            {{item.name}}<br>
            {{item.age|currency}}
        </li>
    </ul>
</div>
<script>
   var app=angular.module('test',[]);
   app.controller('count',function ($scope) {
       $scope.items=[
           {name:'孙琳琳',age:"18.8"},
           {name:'王倩',age:"19.9"},
           {name:'李家宁',age:"20.7"}
       ]
   })
</script>
</body>
</html>

ng-click 事件
ng-hide 隐藏

<input type="button" value="显示隐藏" ng-click="a=!a;">
<div style="background: #eeeeee; width: 300px; height: 300px;" ng-hide="a"></div>

1.angular和javascript 不互通(函数不互通,变量不互通,事件不互通)
2.Angular 的开发模式和传统的模式完全不同——>只需要盯住数据,数据是核心
ng-model 数据。双向绑定
ng-bind 输出
ng-app 范围
{{}} 模板
ng-click
ng-init

ng-repeat    循环
Controller    控制器/桥梁

ng-src        给图片加地址
ng-href
ng-hide
bg-show

相关文章

网友评论

      本文标题:ng-repeat

      本文链接:https://www.haomeiwen.com/subject/fvxanctx.html