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

最新推荐文章于 2020-10-24 20:58:15 发布

Mr_Debugger

最新推荐文章于 2020-10-24 20:58:15 发布

阅读量354

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.youkuaiyun.com/chenacxz/article/details/90050050

版权

angular 专栏收录该内容

4 篇文章

订阅专栏

指令：

ng-app：指向当前组件

ng-controller：指向对应的区域

ng-model:相当于v-model

ng-repeat=v-for

ng-init:

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"
                }
            });
<body ng-controller="bodyCtrl">
        <div ng-controller="todoCtrl">
            <h1>{{name}}</h1>
            <h2>{{obj.arr}}</h2>
            <ul>
                <li ng-repeat="list in obj.lists">{{list.msg}}</li>
            </ul>
            <div>
                <input type="text" ng-model="inputVal"/>{{inputVal}}
            </div>
            <button ng-click="changeName()" type="button">click</button>
        </div>
    </body>

<style>
    .first{
        background-color:#f60;
    }
    .even{
        background-color:red;
    }
    .odd{
        background-color:blue;
    }
</style>
<script src="node_modules/angular/angular.js"></script>
<script>
var todoApp=angular.module("App",[])//声明 App:模块名称 []表示依赖列表
todoApp.controller("todoCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法
                $scope.name="todo";
                $scope.obj={
                    name:'wo',
                    age:20,
                    flag:true
                }
$scope.myOption="a"//下拉框默认选项
                $scope.inputVal="123";
                $scope.lists=['a','b','c','d','e']
            })
todoApp.controller("helloCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法
        </script>
<body ng-controller="todoCtrl">
        <div>
            <h1>{{name}}</h1>
            <ul>
                <li ng-repeat="list in lists" ng-class="{first:$first}">{{list}}</li>
            </ul>
  	        <ul>
                <li ng-repeat="list in lists" ng-class="{first:$index==2}">{{list}}</li>
            </ul>
            <ul>
            <li ng-repeat="list in lists" ng-style="{first:$index==2?'#f60':''}">{{list}}                                     </li>
            </ul>
            <ul>
                <li ng-repeat="list in lists" ng-class="{even:$even,odd:$odd}">{{list}}        </li>
            </ul>
<p ng-if="obj.name==lili">
    show
</p>
<div>
<select ng-model="myOption">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
<div ng-switch="myOption">
<div ng-switch-when="a">
    <h1>A</h1>
</div>
<div ng-switch-when="b">
    <h1>B</h1>
</div>
<div ng-switch-when="c">
    <h1>C</h1>
</div>
</div>
</div>
        </div>
    </body>

表单指令

单选框，复选框，下拉框

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
    }
})

<body ng-controller="todoCtrl">
  <div >
<input type="checkbox" ng-model="formData.checkVal" ng-true-value="1" ng-false-value="0" >//如果打钩传给后端true和false变为1或者0
<button ng-disabled="formData.checkVal">button</button>  //打钩      formData.checkVal为true   button将被禁用
</div>
<div>
    <input type="radio" name="test" value="1" ng-model="formData.test1">1
    <input type="radio" name="test" value="1" ng-model="formData.test1">2
</div>
<div>
<select ng-model="formData.myOption">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
</div>
<div>//动态数据结构
v表示数组中的单个对象   as 左边表示下拉框选中的值：用于数据交互(传给后端的值) as对应的右边下拉框选项显示的值
v表示当前数组的当前对象，相当于this.item
v.value as v.name for v in lists1//标准写法   
 ng-model="formData.myOption1" 默认选中的值
<select ng-init="formData.myOption1=lists1[0]"  ng-options="v for v in lists1">
</select>
</div>
<div>//动态数据结构
<select ng-model="formData.myOption2=lists2[0].value" ng-options="v.value as v.name for v in lists2">
</select>
</div>
<div>//动态数据结构//这样写的话相当于把v in lists2中的V传到后端
<select ng-model="formData.myOption2=lists2[0]" ng-options=" v.name for v in lists2">
</select>
</div>
<div>//动态数据结构//这样写的话相当于把v in lists2中的V传到后端
<select ng-model="formData.myOption2=lists3[0].value" ng-options=" v.value as v.name group by v.group for v in lists3">
</select>
</div>
<button ng-click="submit()">button</button> 
    </body>