<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .red{color:#f00;}

        .blue{color:#036;}  /*后面的覆盖前面的样式*/

    </style>

</head>

<body ng-app="myApp">

    <div ng-controller="firstController">

        <!--ng-focus使用-->

        <input type="text"  ng-focus="getAa()" ng-blur="getbb()">

        <!--ng-selected使用-->

        <input type="checkbox" ng-model="sel">

        <select name="" id="">

            <option value="">1111</option>

            <option value="" ng-selected="sel">2222</option>

            <option value="">3333</option>

        </select>

        <!--ng-change的使用-->

        <input type="checkbox" ng-model="cc" ng-change="change()">

        <!--ng-class的使用-->

        <div ng-class="{red:true,blue:true}">我是中国人</div>

        <!--ng-style的用法,,,,,,注意颜色值需要加单引号-->

        <div ng-style="{color:'#F00'}">我是中国人</div>

        <!--ng-href-->

        <a ng-href="http://www.baidu.com">百度</a>

        <!--ng-show   还有ng-hide，但是建议使用ng-show，改变他的值就好了，其他的ng-hide  ng-if可以不使用-->

        <div ng-show="true">ng-show</div>

    </div>

</body>

<script src="angular/angular.js"></script>

<script type="text/javascript">

    var app=angular.module("myApp",[]);

    app.controller('firstController',function($scope){

       $scope.getAa=function(){

           alert();

       }

       $scope.getbb=function(){

            alert("bb");

        }

       $scope.change=function(){

           if($scope.cc==true){

               alert("选中");

           }else{

               alert("未选中");

           }

       }

    })

</script>

</html>

这节比较简单，不记得怎么用可以看看api都不会有太大的问题

所以也没有用太大的篇幅去写了

就在刚刚，我朋友说如果是新的项目就不要用ionic了，建议用react native，大家觉得怎样

当然我也会研究react，到时候对比一下。　　

ionic准备之angular基础——dom操作相关（6）的更多相关文章

  1. angular的Dom操作

    原文 https://www.jianshu.com/p/9d7249922bda 大纲 1.angular的DOM操作 2.为什么不能直接操作DOM? 3.三种错误操作DOM的方式 4.angula ...

  2. JQuery基础DOM操作

    DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如 ...

  3. javascript基础DOM操作

    DOM 中的三个字母,D(文档)可以理解为整个 Web 加载的网页文档:O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象:M(模型)可以 ...

  4. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  5. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  6. HTML基础—DOM操作

    DOM(Document Object Model文档对象模型) 一个web页面大的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通过dom对象中j ...

  7. ionic准备之angular基础———服务provider 和 factory和service（9）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ionic准备之angular基础——格式化数据以及过滤器（8）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ionic准备之angular基础——模板引入（7）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [codevs_1237]餐巾计划问题

    题目描述 一个餐厅在相继的N 天里,每天需用的餐巾数不尽相同.假设第i天需要ri块餐巾(i=1,2,…,N).餐厅可以购买新的餐巾,每块餐巾的费用为p分:或者把旧餐巾送到快洗部,洗一块需m天,其费用为 ...

  2. 《Linux命令行与shell脚本编程大全 第3版》创建实用的脚本---11

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  3. Sigslot介绍

    最近在看delta3d开源引擎,最底层封装的消息机制,是基于其has_slots,搜索了一下其资料发现是一个很好用的C++库,先对其简单介绍一下. 首先说下插槽机制. 插槽系统常用的有三种:boost ...

  4. nvm: node版本管理工具

    安装nvm   curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash node 版本切 ...

  5. CSS控制图片显示区域

    优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...

  6. python爬虫beautifulsoup4系列4-子节点【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/beautifulsoup4/ 前言 很多时候我们无法直接定位到某个元素,我们可以先定位 ...

  7. Mac下安装npm，http-server，安装虚拟服务器

    http-server是一个简单的,不需要配置的命令行下使用的http服务器.类似的还有Xampp等. 针对前端开发工程的代码不需要编译的特点,使用这种简单的服务器十分的便利. 1.安装这个首先要安装 ...

  8. CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示

    在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...

  9. Ext中点击某个东西弹出框展示

    renderer:function(v){ return '<a href="123" data-qtitle="OK Button" data-qwid ...

  10. 51nod 1101 换零钱 【完全背包变形/无限件可取】

    1101 换零钱  基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 N元钱换为零钱,有多少不同的换法?币值包括1 2 5分,1 2 5角,1 2 5 ...