zoukankan      html  css  js  c++  java
  • Angular JS

    特点:

    1.双向绑定

    2.支持表单和表单验证

    3.使用DOM控制结构来实现迭代或隐藏DOM片段

    4.将逻辑代码关联到DOM

    5.把HTML元素分割成可重用的组件 最大优势:在构建 增删改查 的页面应用

    Angular 最开始是MVC 然后又MVVM

    应用:

    1.首先导入angular.min.js文件      

    2.在<html 后面加入 ng-app> 或者 放在body后或者 div 或其它标签后  不同的只是作用域不同     

    3.{{  }}  中的是运算后的结果

    eg:

    <!--{{}}中的是运算后的结果-->

    <p>{{ 1+1 }} </p>

    <p>{{"你好"+"中国"}}</p>

    <!--保留小数点后三位-->

    <p>{{3.1415926 | number}}</p>

    <!--保留小数点后两位-->

    <p>{{3.1415926 | number:2}}</p>

    <!--带美元符号,并保留小数点后两位-->

    <p>{{100 | currency}}</p>

    <!--带指定符号,并保留小数点后两位-->

    <p>{{100 | currency:"¥"}}</p>

    ng-model相当于输入框里的内容 ng-repeat 实现迭代效果  ng-repeat="role in roles" ng-bind 将值绑定到当前元素的 innerHTML ng-init 执行给定的表达式 $odd 集合中为奇数为true  $even偶数  ng-class="$odd ?  'odd' : 'even'"  样式。 $first 第一个时为true $last  最后一个为true

    <!--startsWith('李') 首字为 李 的-->

    <!--endsWith('李') 末尾为 李 的-->

    ng-style="{color:'white'}"

    ng-show 值为true或flase 显示或隐藏元素 ng-hide 值为true或flase 隐藏或显示元素 ng-if="true"  保留元素 ng-if="false" 删除元素,移除元素

    ng-if、ng-repeat、ng-switch会创建新的一个作用域

    ng-switch ng-switch-when ng-switch-default

    ng-checked="true" 单选框 被选中

    加载(切记:里面要加‘’引号 类似ng-class中的)  <ng-include src="'table.html'"></ng-include>

    自定义指令: module.directive(" ",function(){         return function (scope,element,attrs) { //scope获得day属性的值  element绑定指令的元素  attrs取得元素指令的集合                     }     }); angular.element("<ul>"); //创建 ul

    过滤:<tr ng-repeat="li in lis | filter:{ age:16,sex:'男' }" >       以升序降序排列 orderBy:‘score’

    改变原本的内容要使用 $apply方法 才行 $timeout 定时器方法可直接改变原本的内容

    表单: $pristine   -表单或控件内容是否未输入过  返回true 或false

    $dirty        -表单或控件内容是否已输入过  返回true 或false

    $valid        -表单或控件内容是否已验证通过  返回true 或false

    $invalid     -表单或控件内容是否未验证通过  返回true 或false

    $error       -表单或控件内容验证时的错误提示信息  返回错误对象

    三种服务: 1.factory     定义一个简单的指令 2.service     用构造函数 3.provider    定义一个复杂的指令

  • 相关阅读:
    Linux基础巩固--Day4--文本处理
    Linux基础巩固--Day3--用户组及权限操作
    2020撸python--argparse列出D盘目录详情
    2020撸python--socket编程
    Linux基础巩固--Day2--文件操作
    Linux基础巩固--Day1--背景介绍
    Let's Go -- 初始go语言
    ValueError: Related model 'users.UserProfile' cannot be resolved
    半虚拟化驱动virtio-Windows
    virt-install 创建虚拟机
  • 原文地址:https://www.cnblogs.com/baimengleader/p/5976212.html
Copyright © 2011-2022 走看看