1. angularJs模板
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

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

</head>

<body ng-app="app" ng-controller="ctr">

<script>

    angular.module('app',[])

            .controller('ctr', function ($scope) {

            })

</script>

</body>

</html>

  1. 常见的指令

    1. 　　ng-model
    2. ng-bind
    3. ng-bind-html
    4. ng-if
    5. ng-show
    6. ng-hide
    7. ng-reapeat
    8. ng-href
    9. ng-src
    10. ng-disable
    11. ng-checked
    12. ng-selected
    13. ng-class
    14. ng-style
  2. ..　下面介绍的是一些比较常见相对复杂一点的
    1. ng-reapeat

      <!DOCTYPE html>
      
<html>
      
<head lang="en">
      
    <meta charset="UTF-8">
      
    <title></title>
      
    <script src="../../angular.js"></script>
      
</head>
      
<body ng-app="app" ng-controller="ctr">
      
<select ng-model="str">
      
    <option  ng-repeat="(k,v) in data track by $index">{{v}}</option>
      
</select>
      
{{str}}

<script>
      
    angular.module('app',[])
      
            .controller('ctr', function ($scope) {
      
                $scope.data=[1,23,5,54,8,4,8]
      
            })
      
</script>
      
</body>
      
</html>

      (k,v) in data track by $index 可分别输出key,value
      str的值会是选中option中标签里面的内容

    2. ng-cloak
      解决数据未加载是出现的双括号{{}},对含有那个数据属性的块为加载数据之前为隐藏 
          <style>
      
        [ng-cloak]{
      
            display: none;
      
        }
      
    </style>
      
</head>
      
<body ng-app>
      
<p ng-cloak="">{{'asdada'+'dads'}}</p>
      
<script src="angular.js"></script>
      
</body>

    3. ng-class

       7     <style>
      
 8         .red{
      
 9             color: red;
      
10         }
      
11         .yellow{
      
12             color: yellow;
      
13         }
      
14     </style>
      
15 </head>
      
16 <body ng-app="app" ng-controller="ctr">
      
17 <!--方法1
      
18 <p ng-class="{'true':'red','false':'yellow'}[flag]"> 我是内容</p>
      
19 -->
      
20 <!--方法2-->
      
21 <p ng-class="{'yellow':flag}"> 我是内容</p>
      
22
      
23 <!--方法3
      
24 <p class="{{变量}}"> 我是内容</p>
      
25 -->
      
26 <button ng-click="fn()">按钮{{flag}}</button>
      
27 <script>
      
28     angular.module('app',[])
      
29             .controller('ctr', function ($scope) {
      
30                 $scope.flag=true;
      
31                 $scope.fn= function () {
      
32                     $scope.flag=!$scope.flag;
      
33                 }
      
34             })
      
36 </script>

    4. ng-style

      1
      <p ng-style={'color':'red'}>53456</p>

      　　

    5. ng-selected

      1
      <option value="red" ng-selected='true'>红</option>

      　　

    6. ng-switch

      <div ng-init="str=1" ng-switch="str">
      
    <div ng-switch-when="red">我是red</div>
      
    <div ng-switch-when="yellow">我是yellow</div>
      
    <div ng-switch-when="blue">我是blue</div>
      
    <div ng-switch-default="">我没被选</div>
      
</div>

    7. ng-cheched='str'
      这里的str不会将数据返回$scope只吧数据返回视图

      <!DOCTYPE html>
      
<html ng-app="app">
      
<head lang="en">
      
    <meta charset="UTF-8">
      
    <title></title>
      
    <style>
      
        .red{
      
            color:red;
      
        }
      
    </style>
      
</head>
      
<body ng-controller="ctr">
      
<p><input type="checkbox" ng-model="str"/>是否全选</p>
      
<ul>
      
    <!-- ng-checked只会从数据到视图 --单向绑定
      
        而ng-model会把数据同步到视图，也会把视图的改变同步到数据------双向绑定-->
      
    <li>选项01<input type="checkbox" ng-checked="str"/></li>
      
    <li>选项02<input type="checkbox" ng-checked="str"/></li>
      
    <li>选项03<input type="checkbox" ng-checked="str"/></li>
      
    <li>选项04<input type="checkbox" ng-checked="str"/></li>
      
    <li>选项05<input type="checkbox" ng-checked="str"/></li>
      
</ul>
      
<strong>{{str}}</strong>
      
</body>
      
<script src="angular.js"></script>
      
<script>
      
    angular.module('app',[])
      
            .controller('ctr',function($scope){
      
                $scope.data=['张三','王五','李四','赵六','赵六']

            })
      
</script>
      
</html>

angularJs(1)指令篇的更多相关文章

  1. AngularJS之指令

    紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...

  2. AngularJs自定义指令详解（2） - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  3. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  4. 带你走近AngularJS - 体验指令实例

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  5. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  6. angularJS自定义指令间的“沟通”

    由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...

  7. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  9. 《AngularJS》--指令的相互调用

    转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...

随机推荐

  1. GUI编程01

    1 tkinter TkInter是标准的Python GUI库.的Python与Tkinter的结合提供了一个快速和容易的方法来创建GUI应用程序. Tkinter的提供了一个强大的面向对象的接口T ...

  2. 关于c#运算符的简单应用。。。

    按套路,先罗列一下各种运算符. 运算符的分类: 算数: +-*/(加减乘除)%(取余,就是除不尽剩下的,77/10就余7),++(加加)--(减减) 关系:>  <  >=  < ...

  3. Windows libQGLViewer2.7.0,libQGLViewer2.6.2与g2o20160427, g2o20170730编译生成G2O

    1. Win10, VS2013, libQGLViewer2.6.2 和 QT5.6.3编译时候会出错,初步判断libQGLViewer2.6.2不支持QT5 错误 error LNK1120: 个 ...

  4. Bulma 源码结构

    源码基于 Bulma 0.4.0 版本. 一.入口文件 bulma.sass bulma.sass 是 Bulma 使用 SASS 编译的入口文件. sass bulma.sass css/bulma ...

  5. 预编译对象解决SQL注入问题

  6. 正经学C#_位移与其位移运算符[c#入门经典]

    在c#入门经典一书中,最为糟糕的一节就是位移了,完全没有讲明白,也没有说全,似乎只是轻轻点了一下何为位移,带了两次原码和补码,完全不理会是否明白不明白.这一点这本书很差.因为此书说了,在大多数应用开发 ...

  7. [SinGuaRiTy] 2017-07-24 NOIP2015 模拟赛

    [SinGuLaRiTy-1030] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有题目: Time Limit: 1s | Mem ...

  8. hdu1162(最小生成树 prim or kruscal模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 意义:给出一些点,用线问使所有点直接或间接连通,需要多长: 思路:裸最小生成树: 法1: pri ...

  9. 配置IIS使用Python 与常见问题解决

    打开IIS管理器 选择功能视图,然后选择ISAPI和CGI限制 打开后,在右侧操作,点击添加,会出现下图所示 按图中提示填写相应部分,在选择路径时,默认可能是dll文件,改成全部文件即可,然后再选择p ...

  10. macOS 10.12.1 + Xcode 8.1 安装cocoapods 1.1.1

    最近公司刚给配了一台27寸的iMac,5K屏幕,这酸爽~~,新电脑,免不了系统升级,环境搭建,当一切就绪之后,我就准备装cocoapods了,然而,以前所有的教程全部都变得没用了...然而网上一大堆关 ...