• AngularJs 常用指令标签


    1、ng-app:告诉Angular他应该管理页面的那一部分,可以放在html元素上也可以放在div等标签上
    例:<html ng-app="problem">

    2、ng-controller:控制器,通过在body标签上包含一个控制器,可以管理body标签之间的任何东西,也可以放在div上,来控制这一个div上的任何东西
    例如:<body ng-controller="listController"> <div ng-controller="listController">

    3、{{......}}:将变量的值插入到页面某部分和保持同步(表达式)

    4、ng-repeat:数组中每个元素进行for循环
    例:
    <tr ng-repeat="info in problem.infos">
    <td>
    <div>
    <p>{{info.ClientOrgName}}</p>
    <p>({{info.ClientPerson}} {{info.ClientPhone}})</p>
    </div>
    </td>
    <td>{{info.BusinessName}}</td>
    <td>
    <a href="" ng-click="problem.viewProblemDepict($index)">{{info.ProblemDepict}}</a>
    </td>
    <td>{{info.CreatePerson}}</td>
    <td>
    <div ng-if="info.State==3"></div>
    <div ng-else>{{info.RealName}}</div>
    </td>
    <td>
    <div ng-if="info.State==1">未解决</div>
    <div ng-if="info.State==2">已解决</div>
    <div ng-if="info.State==3">完成</div>
    </td>
    </tr>
    <tr data-ng-if="problem.infos.length==0">
    <td colspan='8'>
    <div style="text-align: center;">没有符合条件的项</div>
    </td>
    </tr>

    5、currency:过滤器,将美元形式格式化 例:currency : '¥' "

    6、ng-model:指令把元素值(比如输入域的值)绑定到应用程序,创建输入字段的数据绑定,{{.......}}建立的是单向的联系。ng-model能与checkbox、input、radio等标准的元素正常的工作,如checkbox:SomeController中的$scope有一个youCheckedit的属性,选中为true没选中则为false

    7、ng-init: 指令初始化应用程序数据 例:ng-init="firstName='John'"

    8、ng-click:点击事件

    9、ng-dbclick:双击事件

    10、ng-bind:与{{......}}等价 例:ng-bind="goodInfo.goodsName"

    11、ng-change:change事件

    12、ng-submit自动的阻止浏览器发送默认的post动作

    13、ng-src、ng-href与src、href等同

    14、ng-option:在select用到,将option里的对象动态的生成

    15、ng-href:与a标签中的href等同

    16、ng-class:用来给元素绑定类名,其表达式的返回值可以是以下三种:

      类名字符串,可以用空格分割多个类名,如 ‘class1 class2’;
      类名数组,数组中的每一项都会层叠起来生效;
      一个名值对应的map,其键值为类名,值为boolean类型,当值为true时,该类会被加在元素上。

    17、ng-class-odd、ng-class-even

      两个指令,用来配合 ng-repeat 分别在奇数列和偶数列使用对应的类,用在表格中实现隔行换色更方便

    18、ng-style

      ng-style 用来绑定元素的 css 样式,其表达式的返回值为一个 js 对象,键为 css 样式名,值为该样式对应的合法取值。用法比较简单:
      例:

      $scope.style = {color:'red'}; 
      <div ng-style="{color:'red'}">ng-style测试</div>
      <div ng-style="style">ng-style测试</div>

     

  • 相关阅读:
    python学习(四)流程控制语句
    python学习(三)运算符
    python学习(二)数据类型转换
    python学习(一)基本数据类型
    mysql学习-mysql分页查询
    装饰器
    迭代器与生成器
    深入解析类对象与类实例的创建过程
    深入理解Python中的元类---metaclass
    flask源码解析之DispatcherMiddleware
  • 原文地址:https://www.cnblogs.com/baoshuyan66/p/4875342.html
Copyright © 2020-2023  润新知