AngularJS的循环输出

最新推荐文章于 2021-09-17 20:43:50 发布

weixin_30793643

最新推荐文章于 2021-09-17 20:43:50 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tearfc/p/5431101.html

本文深入探讨AngularJS中的关键指令如ng-repeat、ng-style、ng-if与ng-show/ng-hide等，通过实例演示如何实现循环、样式控制、条件判断与元素可见性控制，并介绍ng-model与$index的作用。同时，文章提供了代码片段的详细解析，帮助开发者理解AngularJS的基本用法。

    <div class="header">
      <ul id="headerul">
        <li ng-repeat="list in $headList" ng-style="checkByHref(list.href)" ng-if="list.href">
          <a ng-href="{{list.href}}" ng-bind="list.text"></a></li>
      </ul>
　　</div>
    $scope.checkByHref = function (href) {
      if (window.location.pathname.indexOf(href) != -1) return {background: '#2b73b5'};
    };

项目中遇到这样一段代码，找了好久没找到循环的范围。网上查了一下，这个叫AngularJS，语法和JSP比较像。

ng-repeat指令生命在需要循环内容的元素上，lists的变量名需要和从controller的变量名相同，list是为遍历数组中的每个对象取的别名。

ng-style 指令为 HTML 元素添加 style 属性。ng-style 属性值必须是对象，表达式返回的也是对象。对象由 CSS 属性和值注册，即 key=>value 对。

ng-if 如果ng-if中的表达式为false，则对应的元素整个会从DOM中移除而非隐藏，但审查元素时你可以看到表达式变成注释了。
如果相进行隐藏，可以使用ng-hide。

<div ng-if="1+1===3">
    无法审查到该元素
</div>
<div ng-hide="1+1==2">
    可审查
</div>

ng-show/ng-hide 根据表达式显示/隐藏HTML元素，注意是隐藏，不是从DOM移除:

<div ng-show="1+1 == 2">
    1+1=2
</div>
<div ng-hide="1+1 == 3">
    you can't see me.
</div>

ng-model 将表单控件和当前作用域的属性进行绑定。

<div data-ng-app="" data-ng-init="quantity=1;price=5">

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">

<p><b>总价:</b> {{quantity * price}}</p>

</div>

$index可以返回当前引用对象的序号，从0开始，另外还有$first、$middle、$last可以返回布尔值，用于告诉你当前元素是否是集合中的第一个中间的最后一个元素。

转载于:https://www.cnblogs.com/tearfc/p/5431101.html