Angular基础

表达式

在Angular中表达式是运用在视图中的一段代码，如：

{{ 1.98 + 2.98 | number : 0 }}

控制器

在Angular中，控制器(controller)的功能是管理页面的逻辑代码，当控制器通过ng-controller指令被添加到DOM页面时，Angular将会通过控制器构造函数生成一个实体对象，在这个过程中，$scope对象作为参数注入其中，并允许用户访问$scope对象

初始化`$scope`对象

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-controller="MyController">

  {{text}}

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('MyController', function($scope){
    $scope.text = 'Hello, World!';
  })
</script>
</body>
</html>

添加`$scope`对象方法

除了可以通过初始化的方式为$scope对象添加属性之外，还可以为$scope对象添加方法，并依靠这些定义的方法来满足视图层中逻辑处理和事件执行的需要

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-controller="MyController">

  {{text_show()}}

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('MyController', function($scope){
    $scope.text_show = function () {
      return 'Hello, Angular!';
    }
  })
</script>
</body>
</html>

在事件中为`$scope`对象绑定方法

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-controller="MyController">

  <p>{{text}}</p>
  <button ng-click="click_show()">点击</button>

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('MyController', function($scope){
    $scope.text = 'Hello, World!';
    $scope.click_show = function() {
      $scope.text = '这是点击后显示的内容';
    }
  })
</script>
</body>
</html>

除了可以向$scope对象添加方法外，还可以在方法中添加参数，多个参数通过口号隔开

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-controller="MyController">

  <p>{{text}}</p>
  <button ng-click="click_show()">点击显示</button>
  <button ng-click="click_params('我是带参数的')">带参数的点击</button>

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('MyController', function($scope){
    $scope.text = '';
    $scope.click_show = function() {
      $scope.text = 'Hello, World!';
    }
    $scope.click_params = function(param) {
      $scope.text = param;
    }
  })
</script>
</body>
</html>

`$scope`对象属性和方法的继承

在Angular中，ng-controller指令允许在不同的层次元素中指定控制器，处于子层控制器中的$scope对象将会自动继承父层控制器中$scope对象的属性和方法

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <div ng-controller="parentController">
    <div ng-controller="childController">
      <span>{{text}}</span><br>
      <span>{{child_text}}</span><br>
      <button ng-click="click_show()">继承</button>
    </div>
  </div>

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('parentController', function($scope){
    $scope.text = 'Hello, Angular!';
    $scope.click_show = function() {
      $scope.text = '单击后显示的内容';
    }
  })
  .controller('childController', function($scope){
    $scope.child_text = '欢迎来到AngularJS的世界！';
  })
</script>
</body>
</html>

模板

Angular提供一套完善的模板系统，配合$scope对象和数据双向绑定机制，将页面纯静态元素经过行为、属性的添加和格式的转换，最终变成在浏览器中显示的动态页

构建模板内容

构建的方式一般通过下面三种方式：

直接在页面中添加元素和Angular指令，依赖控制器中构建的属性和方式绑定模板中的元素内容和事件，实现应用需求
通过type类型为text/ng-template的<script>元素来构建一个用于绑定数据的模板
通过添加元素的src属性，导入一个外部文件作为绑定数据的模板，除了src属性外，还需要使用ng-include指令

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<script type="text/ng-template" id="tplbase">
  姓名: {{name}} <br>
  邮箱: {{email}}
</script>
<div ng-include="'tplbase'" ng-controller="MyController"></div>

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
          .controller('MyController', function($scope){
            $scope.name = 'Kaindy7633';
            $scope.email = 'kaindy7633@gmail.com';
          })
</script>
</body>
</html>

使用指令复制元素

在Angular中，使用ng-repeat指令来复制元素，也可以叫循环输入元素

在使用ng-repeat中，Angular还提供了几个专有变量，通过它们可以处理显示数据时的各种状态

$first：标记记录是否是首条，如果是返回true，否则返回false
$last：标记记录是否是尾条，如果是返回true，否则返回false
$middle：标记记录是否是中间条，如果是返回true，否则返回false
$index：标记记录的索引号，其对应的值从0开始

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <div ng-controller="MyController">
    <ul>
      <li>
        <span>序号</span>
        <span>姓名</span>
        <span>性别</span>
        <span>是否首条</span>
        <span>是否尾条</span>
      </li>
      <li ng-repeat="stu in data">
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{$first?'是':'否'}}</span>
        <span>{{$last?'是':'否'}}</span>
      </li>
    </ul>
  </div>

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
          .controller('MyController', function($scope){
            $scope.data = [
              {name: '张明明', sex: '女'},
              {name: '李青思', sex: '女'},
              {name: '刘晓华', sex: '男'},
              {name: '陈忠忠', sex: '男'}
            ];
          })
</script>
</body>
</html>

添加元素样式

在Angular中，添加元素样式分为以下几种方式：

(1) 直接绑定值为CSS类别名称的$scope对象属性，如：

在Angular中定义：

$scope.red = 'red';

在HTML中定义：

<div ng-class="{{red}}"></div>

或者

<div class="{{red}}"></div>

上面的这种方式简单，但不提倡，在开发Angular应用时，尽量保证控制器代码是处理业务逻辑，而不涉及页面元素

(2) 以字符串数组方式选择性添加CSS类别名称

这种方式根据控制器中一个布尔类型的属性值来决定页面元素添加那种CSS样式

在Angular中定义：

$scope.blnfocus = true;

在html中定义：

<div ng-class="{true: 'red', false: 'green'}[blnfocus]"><div>

(3) 通过定义key/value对象的方式来添加多个CSS样式名称

这种方式根据控制显示样式的属性值添加多个样式名

在Angular中定义：

$scope.a = false;
$scope.b = true;

在html中定义：

<div ng-class="{'red': a, 'green': b}"></div>

另外，在Angular中，还有两个与定义样式相关的指令，分别是ng-class-odd和ng-class-even，它们专用于以列表方式显示数据，对应奇数行与偶数行的样式

<!doctype html>
<html ng-app="MyApp">
<head>    
  <meta charset="UTF-8">    
  <title>Document</title>    
    <style>        
        body {font-size: 12px;}        
        ul {list-style-type: none; width: 408px; margin: 0; padding: 0;}        
        ul li {float: left; padding: 5px 0;}        
        ul .odd {color: #0026ff;}        
        ul .even {color: #ff0000;}        
        ul .bold {font-weight: bold;}        
        ul li span {width: 52px; float: left; padding: 0px 10px;}                        ul .focus {background-color: #ccc;}    
    </style>  
  </head>
    <body>    
    <div ng-controller="MyController">        
        <ul>            
          <li ng-class="{{bold}}">                
              <span>序号</span>                
              <span>姓名</span>                
              <span>性别</span>                
              <span>是否首条</span>                
              <span>是否尾条</span>            
          </li>            
          <li ng-repeat="stu in data"                
               ng-class-odd="'odd'"                
               ng-class-even="'even'"                
               ng-click="li_click($index)"                
               ng-class="{focus: $index==focus}">                          
              <span>{{$index+1}}</span>                
              <span>{{stu.name}}</span>                
              <span>{{stu.sex}}</span>                
              <span>{{$first?'是':'否'}}</span>                
              <span>{{$last?'是':'否'}}</span>            
          </li>        
      </ul>    
    </div>
<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('MyController', function($scope){
    $scope.bold = 'bold';
    $scope.li_click = function() {
      $scope.focus = i;
    };
    $scope.data = [
      {name: '张明明', sex: '女'},                    
      {name: '李青思', sex: '女'},                   
      {name: '刘晓华', sex: '男'},                   
      {name: '陈忠忠', sex: '男'}  
    ];
  })
</script>
</body>
</html>

控制元素的隐藏与显示状态

在Angular中，可以通过ng-show、ng-hide和ng-switch指令来控制元素的隐藏与显示

而ng-switch指令的功能是显示匹配成功的元素，它要与ng-switch-when和ng-switch-default指令配合使用

<!doctype html>
<html ng-app="MyApp">
  <head>  
    <meta charset="UTF-8">  
    <title>Document</title>
  </head>
  <body>  
    <div ng-controller="MyController">    
      <div ng-show="{{isshow}}">Kaindy7633</div>    
      <div ng-hide="{{isHide}}">kaindy7633@gmail.com</div>      
      <ul ng-switch on={{switch}}>      
        <li ng-switch-when="1">Kaindy7633</li>      
        <li ng-switch-when="2">Kaindy7633@gmail.com</li>  
        <li ng-switch-default>更多...</li>    
      </ul>  
    </div>  
    <script src="./angular.min.js"></script>  
    <script>    
      angular.module('MyApp', [])    
      .controller('MyController', function($scope){       
        $scope.isshow = true;      
        $scope.isHide = false;      
        $scope.switch = 3;    
      })  
    </script>
  </body>
</html>

表单控件

表单基本验证功能

在Angular中，针对表单和表单控件提供了如下属性，用于验证控件交互值的状态

$prisine表示表单或控件内容是否未输入过
$dirty表示表单或控件内容是否已输入过
$valid表单或控件内容是否已验证通过
$invalid表示表单或控件内容是否未验证通过
$error表示表单或控件内容验证时的错误提示信息

前面4个均返回布尔类型的值，最后一个返回一个错误对象

<!doctype html>
<html ng-app="MyAPp">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body {font-size: 12px;}
    input {padding: 3px;}
  </style>
</head>
<body>
<form name="myForm" ng-submit="save()" ng-controller="MyController">
  <div>
    <input type="text" name="username" ng-model="name" required>
    <span ng-show="myForm.username.$error.required">
       用户名不能为空
    </span>
  </div>
  <div>
    <input type="email" name="email" ng-model="email" required>
    <span ng-show="myForm.email.$error.required">Email地址不能为空</sapn>
    <span ng-show="myForm.email.$error.email">Email格式不正确</span>
  </div>
  <div>
    <input type="submit" name="submit" ng-disabled="myForm.$invalid" value="提交">
  </div>
</form>

<script src="./angular.min.js"></script>
<script>
  var myform = angular.module('MyApp', []);
  myfrom.controller('MyController', ['$scope', function($scope){
    $scope.name = 'Kaindy7633';
    $scope.email = 'kaindy7633@gmail.com';
    $scope.save = function(){
      alert('保存成功');
    }  
  }]);
</script>
</body>
</html>

表单中的checkbox和radio控件

<!doctype html>
<html ng-app="MyApp">
  <head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>    
      body { font-size: 12px;}    
      input { padding: 3px;}  
    </style>
  </head>
  <body>
  <form name="myForm" ng-submit="save()" ng-controller="MyController">  
    <input type="checkbox" ng-model="a">同意  
    性别:  
    <input type="radio" ng-model="b" value="男">男  
    <input type="radio" ng-model="b" value="女">女  
    <input type="submit" vlaue="提交">  
    <p>{{c}}</p>
  </form>
  <script src="./angular.min.js"></script>
  <script>  
  var myform = angular.module('MyApp', []);  
  myform.controller('MyController', ['$scope', function($scope){    
    $scope.a = true;    
    $scope.b = '男';    
    $scope.save = function() {      
      $scope.c = '您选择的是:' + $scope.a + '和' + $scope.b;    }  }]);
  </script>
</body>
</html>

表单中的select控件

在Angular中，select控件可以借助ng-options指令将数组、对象等数据添加到<option>元素中

(1) 绑定简单的数组数据

在控制器中添加数组数据

$scope.data = ['a', 'b', 'c', 'd'];

在select控件中，通过ng-options指令，采用...for...in...格式将数组数据与select控件绑定

<select ng-model="a" ng-options="text for txt in data">
  <option value="">--请选择--</option>
</select>

<!doctype html>
<html ng-app="MyApp">
<head>  
  <meta charset="UTF-8">  
  <title>Document</title>
</head>
<body>
  <form ng-controller="MyController">  
    <select ng-model="a" ng-options="txt for txt in data"> 
      <option value="">--请选择--</option>  
    </select>
  </form>
  <script src="./angular.min.js"></script>
  <script>  
  var myform = angular.module('MyApp', []); 
  myform.controller('MyController', ['$scope', function($scope){    
    $scope.data = ['A', 'B', 'C', 'D', 'E'];  
  }]);
  </script>
</body>
</html>

(2) 绑定简单的对象数据

在控制器中添加对象数据

$scope.data = [
  {id: '1', name: 'A'},
  {id: '2', name: 'B'},
  {id: '3', name: 'C'},
  {id: '4', name: 'D'}
];

在控件中，采用...as...for...in...的格式将对象数据与select绑定

<select ng-model="a" ng-options="txt.id as txt.name for txt in data">
  <option value="">--请选择--</option>
</select>

(3) 以分组的形式绑定对象数据

首先在控制器中添加对象数据

$scope.data = [
  {id: '1', name: 'A', key: '大写'},
  {id: '2', name: 'B', key: '大写'},
  {id: '3', name: 'C', key: '小写'},
  {id: '4', name: 'D', key: '小写'}
];

如果在上述数据中，以key为分组依据，则可以采用...as...group by...for...in...的格式

<select ng-model="a" ng-options="txt.id as txt.name group by txt.key for txt in data">
  <option value="">--请选择--</option>
</select>

综合示例：

<!doctype html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form name="myform" ng-controller="MyController">  
  <div>
    学制: 
   <select ng-model="school" ng-options="s.id as s.name for s in schoolData" ng-change="schoolChange(school)"> 
     <option value="">--请选择--</option>
    </select>
    <span>{{school_show}}</span>  
  </div>
  <div>
    班级:
   <select ng-model="class" ng-options="c.id as c.name group by c.grade for c in classData" ng-change="classChange(class)">
      <option value="">--请选择--</option>
    </select>
    <span>{{class_show}}</span>
  </div>
</form>
<script src="./angular.min.js"></script>
<script>
  var myapp = angular.module('MyApp', []);  
  myapp.controller('MyController', ['$scope', function($scope){    
    $scope.schoolData = [      
      {id: '1001', name: '小学'}, 
      {id: '1002', name: '初中'},
      {id: '1003', name: '高中'}    
    ];
    $scope.classData = [
      {id: '1001', name: '(1)班', grade: '一年级'},
      {id: '1002', name: '(2)班', grade: '一年级'}, 
      {id: '2001', name: '(1)班', grade: '二年级'},
      {id: '2002', name: '(2)班', grade: '二年级'},
      {id: '3001', name: '(1)班', grade: '三年级'},
      {id: '3002', name: '(2)班', grade: '三年级'}
    ];
    $scope.school = '';
    $scope.class = '';
    $scope.schoolChange = function(e) {      
      $scope.school_show = '您选择的是:' + e;
    }
    $scope.classChange = function(e) { 
     $scope.class_show = '您选择的是:' + e; 
    }  
 }]);
</script>
</body>
</html>

最后编辑于：2017.12.03 06:42:08

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,948评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,371评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,490评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,521评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,627评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,842评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,997评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,741评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,203评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,534评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,673评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,339评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,955评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,770评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,000评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,394评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,562评论 2赞 349

Angular基础

表达式

控制器

初始化$scope对象

添加$scope对象方法

在事件中为$scope对象绑定方法

$scope对象属性和方法的继承

模板

构建模板内容

使用指令复制元素

添加元素样式

控制元素的隐藏与显示状态

表单控件

表单基本验证功能

表单中的checkbox和radio控件

表单中的select控件

推荐阅读更多精彩内容

初始化`$scope`对象

添加`$scope`对象方法

在事件中为`$scope`对象绑定方法

`$scope`对象属性和方法的继承