Angular——Angular day06(常用指令)

dbt@L

已于 2022-07-10 10:54:25 修改

阅读量123

点赞数

分类专栏： Angular 文章标签： angular.js javascript 前端

于 2020-08-26 21:14:11 首次发布

本文链接：https://blog.csdn.net/qq_43201350/article/details/106089548

版权

Angular 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

常用指令(一)

ng-app: 指定模块名，angular管理的区域
ng-model：双向绑定，输入相关标签
ng-init：初始化数据
ng-click：调用作用域对象的方法（点击时）
ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
ng-bind：解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
ng-repeat：遍历数组显示数据，数组有几个元素就会产生几个新的作用域
$index, $first, $last, $middle, $odd, $even
ng-show: 布尔类型，如果为true才显示
ng-hide: 布尔类型，如果为true就隐藏

例子：

<body ng-app="myApp" >
<div ng-controller="myCtrl">
    <div>
        <h2>自动计算</h2>
        数量：<input type="number" ng-model="price1">
        价格：<input type="number" ng-model="count1">
        <p>总计：{{price1 * count1}}</p>
    </div>
    <h2>手动计算</h2>
    <div>
        数量：<input type="number" ng-model="price2">
        价格：<input type="number" ng-model="count2">
        <button ng-click="GetPrice()">计算</button>
        <p>总计：{{AllPrice}}</p>
    </div>

    <div>
<!--        $index, $first, $last, $middle, $odd, $even-->
        <ul>

            <h2>奇偶看下标，下标从0开始</h2>
            <li ng-repeat="person in persons">

                下标索引：{{$index}}---是否为第一个：{{$first}}---是否为最后一个：{{$last}}---是否为中间的：{{$middle}}---是否为奇：{{$odd}}---是否偶：{{$even}}-{{person.name}}---{{person.age}}
            </li>

        </ul>
    </div>
<!--    ng-bind 解决{{}}显示数据闪屏问题-->
        <div>
            <p>{{111}}</p>
            <p ng-bind="111"></p>
        </div>
        <div>
            <button ng-click="tabab()">切换ab</button>
<!--            切换过程：-->
<!--            true显示-->
<!--            true隐藏-->
<!--            false隐藏-->
<!--            false显示-->
            <p ng-show="ab">aa</p>
            <p ng-hide="ab">bb</p>
        </div>

</div>

<script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
    angular.module('myApp',[])
        .controller('myCtrl',function ($scope) {
            $scope.price1 = 20
            $scope.count1 = 1

            $scope.price2 = 30
            $scope.count2 = 1
            $scope.AllPrice = 30

            $scope.GetPrice = function () {
                $scope.AllPrice =  $scope.price2  * $scope.count2

            }
            $scope.persons = [
                {name:'a',age:1},
                {name:'a2',age:12},
                {name:'a3',age:13},
                {name:'a4',age:14}
            ];
            $scope.ab = true
            $scope.tabab = function () {
                $scope.ab = !$scope.ab

            }


        })

</script>

</body>

效果：

在这里插入图片描述

常用指令(二)

ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
ng-style: 动态引用通过js指定的样式对象 {color:‘red’, background:‘blue’}
ng-click: 点击监听, 值为函数调用, 可以传$event
ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event

例子：

<style>
  /*偶*/
  .evenB {
    background-color: grey;
  }
  /*奇*/
  .oddB {
    background-color: green;
  }
</style>
<body ng-app="myApp">
<div ng-controller="myCtrl">
  <div style="width:200px;height: 200px;" ng-style="myStyle"
  ng-mouseenter="enter()" ng-mouseleave="leave()"></div>
  <ul>
    <li ng-repeat="xxx in persons" ng-class="{evenB:$even,oddB:$odd}">
      {{xxx.name}}--{{xxx.age}}
    </li>
  </ul>
</div>


<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
      .controller('myCtrl',function ($scope) {
          $scope.myStyle ={
            background:'red'
          }
          $scope.enter = function () {
            this.myStyle.background = 'blue'
          }
          $scope.leave = function () {
            this.myStyle.background = 'red'
          }
          $scope.persons = [
            {name:'a',age:1},
            {name:'b',age:2},
            {name:'c',age:3},
            {name:'d',age:4}
          ]
      })
</script>
</body>