Angular基础

表达式

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

{{ 1.98 + 2.98 | number : 0 }}

控制器

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

初始化`$scope`对象




  
  



  {{text}}

添加`$scope`对象方法

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




  
  



  {{text_show()}}

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




  
  



  {{text}}

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




  
  



  {{text}}

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

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




  
  



  
    
      {{text}}

      {{child_text}}

模板

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

构建模板内容

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

直接在页面中添加元素和Angular指令，依赖控制器中构建的属性和方式绑定模板中的元素内容和事件，实现应用需求

通过type类型为text/ng-template的

使用指令复制元素

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

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

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




  
  



  
    
      
        序号
        姓名
        性别
        是否首条
        是否尾条
      
      
        {{$index+1}}
        {{stu.name}}
        {{stu.sex}}
        {{$first?'是':'否'}}
        {{$last?'是':'否'}}

添加元素样式

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

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

在Angular中定义：

$scope.red = 'red';

在HTML中定义：

或者

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

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

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

在Angular中定义：

$scope.blnfocus = true;

在html中定义：

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

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

在Angular中定义：

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

在html中定义：

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



    
      
  Document    
      
  
        
            
                    
                          
              序号                
              姓名                
              性别                
              是否首条                
              是否尾条            
                      
                                    
              {{$index+1}}                
              {{stu.name}}                
              {{stu.sex}}                
              {{$first?'是':'否'}}                
              {{$last?'是':'否'}}

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

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

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



    
      
    Document
  
    
        
      Kaindy7633    
      [email protected]      
            
        Kaindy7633      
        [email protected]  
        更多...

表单控件

表单基本验证功能

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

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

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




  
  
  



  
    
    
       用户名不能为空
    
  
  
    
    Email地址不能为空
    Email格式不正确

表单中的checkbox和radio控件



    
      
    Document  
    
  
  
    
    同意  
    性别:  
    男  
    女  
      
    {{c}}

表单中的select控件

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

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

在控制器中添加数组数据

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

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



  
    
  Document

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

在控制器中添加对象数据

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

在控件中，采用...as...for...in...的格式将对象数据与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...的格式

综合示例：




  
  Document


  
  
    学制: 
   
    {{school_show}}  
  
  
    班级:
   
    {{class_show}}

Angular基础

表达式

控制器

初始化$scope对象

添加$scope对象方法

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

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

模板

构建模板内容

使用指令复制元素

添加元素样式

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

表单控件

表单基本验证功能

表单中的checkbox和radio控件

表单中的select控件

你可能感兴趣的:(Angular基础)

初始化`$scope`对象

添加`$scope`对象方法

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

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