angular基础知识简介2：常用指令介绍

指令：

ng-app：指向当前组件

ng-controller：指向对应的区域

ng-model:相当于v-model

ng-repeat=v-for

ng-init:

{{name}}{{age}}

ng-repeat下对应的属性

$index索引

$first $middle $last $event $odd

ng-class ng-style

ng-if ng-show ng-hide

ng-switch 根据条件显示和隐藏

ng-readonly

ng-src//动态显示

ng-disabled

ng-bind ==={}

ng-cloak防止闪烁

ng-bind-templae==={}{}显示多个

var todoApp=angular.module("App",[])//声明 App:模块名称 []表示依赖列表
todoApp.controller("bodyCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法
                var name="lili";
                $scope.action=function(){

            });
todoApp.controller("todoCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法
                $scope.name="todo";
                $scope.obj={
                    name:'wo',
                    age:20,
                    arr:['a','b','v'],
                    lists:[{msg:"a",name:"alert"},
                        {msg:"b",name:"alert"},
                        {msg:"c",name:"alert"},
                        {msg:"d",name:"alert"}
                    ]
                }
                $scope.inputVal="123";
                $scope.changeName=function(){
                    $scope.name="abc"
                }
            });

        

            
{{name}}
            
{{obj.arr}}
            

                
{{list.msg}}
            
            

                {{inputVal}}
            
            click
        
    





        

            
{{name}}
            

                
{{list}}
            
  	        

                
{{list}}
            
            

            
{{list}}                                     
            
            

                
{{list}}        
            

    show



    A
    B
    C



    
A


    
B


    
C



        
    

表单指令

单选框，复选框，下拉框

var todoApp=angular.module("App",[])//声明 App:模块名称 []表示依赖列表
todoApp.controller("todoCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法
                $scope.formData={
                    test1:"2"//默认值,
                    myOption:'a',
                  }
 $scope.lists1=['a','b','c','d']
$scope.lists2=[{name:'选项A',value:'1'},{name:'选项B',value:'2},{name:'选项C',value:'3'},{name:'选项D',value:'4'}]//value表示传到后台的值，name,表示下拉选框选中的值
    $scope.lists3=[{name:'选项A',value:'1'，group:"A"},{name:'选项B',value:'2',group:"B"},        {name:'选项C',value:'3',group:"A"},{name:'选项D',value:'4',group:"B"}]
 		$scope.submit=function(){
    alert(JSON.stringify($scope.formData))//不专程字符串显示的为object
    }
})


  

//如果打钩传给后端true和false变为1或者0
button  //打钩      formData.checkVal为true   button将被禁用


    1
    2



    A
    B
    C


//动态数据结构
v表示数组中的单个对象   as 左边表示下拉框选中的值：用于数据交互(传给后端的值) as对应的右边下拉框选项显示的值
v表示当前数组的当前对象，相当于this.item
v.value as v.name for v in lists1//标准写法   
 ng-model="formData.myOption1" 默认选中的值



//动态数据结构



//动态数据结构//这样写的话相当于把v in lists2中的V传到后端



//动态数据结构//这样写的话相当于把v in lists2中的V传到后端



button