angualr 基础

    xiaoxiao2021-11-07  83

    angular表达式


    定义(作用):

    angular表达式是angular基本概念之一,将数据绑定视图的方式(手段)

    形式:

    1. {{值}} (包括花括号在内才是完整的表达式) 2. js语法,按照js来解析,双花括号;

    定义一个控制分俩步:

    1. HTML通过ng-controller="控制器名字"限定控制器的作用范围 2. JS负责控制的定义;

    方法:

    app.controller("控制器名称",[])方法定义,第二个参数是关于控制器的回调函数的写法,或者说是依赖注入的设置;

    注意:

    $scope:作用域对象;:1. 主要作为限定范围的实现手段 2. 作为变量以及方法的依存环境; 3. 继承的作用。。。。。 app.controller("myCtrl1",function($scope){ $scope.personMan = "JackChen"; //在控制器里面定义了一个变量 })

    scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

    ng-app: 指令用于限定以及配合定义angular应用程序;ng-model: 用于把文本输入框的输入值(value)绑定到 angular的变量(变量的本质实际就是数据) 注意:文本输入框是代词:a. input常见类型 b. textarea; 特点:双向绑定(v-vm-m,m-vm-v); <div> <input type="text" ng-model='aaa' /> <p>{{aaa}}</p> </div> ng-bind: 将数据绑定到视图的一个指令;其作用跟表达式 基本一致 ng-bind=’a*b

    eg: <p ng-bind="name"></p>

    扩充:表达式的作用主要是将数据绑定视图(view,html)

    ng-init: 初始化一个angular变量(数据);(作用于html) eg:ng-init=”person={name:”LBJ”,age:”31”,teChange:”pangxiebu”}”使用的实行 ng-init=”变量名字=值”;

    ng-class: 用来动态绑定类名; ng-class={“active”:boolean};

    ng-show,ng-hide:控制元素的显示与隐藏; 使用形式: ng-show=”布尔值”; ng-hide相反; <input type="checkbox" ng-model="key"> <p ng-show="key"> //华仔不见了你来找我吧 <img src="boshu.jpg" alt=""> </p> <div class="cute3" ng-hide="key"> <img src="huazai.jpg" alt=""> </div> ng-controller: 这个定义一个控制器的指令; 控制器:1.(C/VM)负责数据的业务逻辑处理(数据的运算); 2. 负责连接M与V;ng-repeat:根据数据源实现遍历;(双向绑定的)

    ng-repeat=’ i in var’ $index 索引

    ng-repeat="x in arrs track by $index"

    按照索引遍历

    function Aaa($scope){ $scope.dataList = [ 'aaaaa' , 'bbbbb' , 'cccccc' , 'ddddd' ]; }; <li ng-repeat=" x in dataList " ng-click=" x=$index ">{{x}}</li>

    9.ng-事件=‘处理方式’ 关于事件:ng-click,ng-mousemove,ng-mouseenter…..比如窗口事件就不是ng-事件 定义; ng-事件 使用:

    1. 先在目标元素所在的控制器里面定义相应的方法 2. 在给目标元素加上ng-事件=“处理方法()” <p ng-controller='mas' ng-mousemove='ss()'>cccccccccccccc</p> app.controller('mas',function($scope){ $scope.ss=function(){ alert('s') } })
    转载请注明原文地址: https://ju.6miu.com/read-678080.html

    最新回复(0)