• angularJS(6)


    angularJS(6)

    一:angularJs的事件。

    1.ng-click指令定义了AngularJS点击事件。

    复制代码
    复制代码
    <div ng-app="myapp" ng-controller="myctrl">
        <button ng-click="count=count+1">点赞</button>
        <h1><span  style="color:'red">♥</span>{{count}}</h1>
    </div>
    <script type="text/javascript">
            angular.module('myapp',[]).controller('myctrl',function ($scope) {
                $scope.count=0;
            })
    </script>
    复制代码
    复制代码

    2.angularJs的事件方法

    复制代码
    复制代码
    <div ng-app="mapp" ng-controller="mctrl">
      <input type="button" ng-click="toggle()" value="显示/隐藏">
      <div ng-show="hhh">
          你的大名:<input type="text" ng-model="uname"><br>
        你的称呼:<input type="text" ng-model="usex"><br>
        <h1>{{uname+usex}}</h1>
      </div>
    </div>
    <script language="javascript">
     var app=angular.module("mapp",[]);
     app.controller("mctrl",function($scope){
          $scope.uname=“黄袍怪";
          $scope.usex="妖";
          $scope.hhh=true;
          $scope.toggle=function(){
              $scope.hhh= !$scope.hhh;
              }
         })
    </script>
    复制代码
    复制代码

    二:下面列一些angularJs常用的事件。

    ·ng-mousedown 鼠标按下
    ·ng-mouseup鼠标按下弹起
    ·ng-mouseenter鼠标进入
    ·ng-mouseleave鼠标离开
    ·ng-mousemove鼠标移动
    ·ng-mouseover鼠标进入

    ·ng-dblclick双击事件
    ·ng-blur 失去焦点事件
    ·ng-focus获取焦点
    ·ng-change更新model
    ·ng-copy 复制 ctrl+c
    ·ng-paste 粘贴 ctrl+v
    ·ng-keydown:键盘按下

     三:angularJs过滤器。

    AngularJS 过滤器可用于转换数据:
    格式化数字为货币格式:currency
    从数组项中选择一个子集:filter
    格式化字符串为小写: lowercase
    根据某个表达式排列数组:orderBy:’列名’
    默认是从小到大排序,如果想从大到小排序,只需在列名前加 – 号
     显示前几条: limitTo:3
    如:<li ng-repeat=“x in student | orderBy:’uage’ | limitTo:3”>{{x.sname}}</li>
    格式化字符串为大写:uppercase

    实例:{{ uname | uppercase }}

    四:angularJs服务(service)

    AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务

    $location  服务 。 
    $http 服务。
    $timeout 服务。
    $interval 服务。
    创建自定义服务。

    好文要顶 已关注 收藏该文
  • 相关阅读:
    【Blazor】在ASP.NET Core中使用Blazor组件
    Github和Azure DevOps的代码同步
    【.NET Core】在Win10中用VS Code debug
    【UWP】利用EF Core操作SQLite
    【ASP.NET Core】mdl conflicts with tinymce
    【Windows10】如何使用Segoe MDL2 Assets图标
    Docker安装及使用,Docker 安装MySQL、安装Tomcat、安装RabbitMQ
    Anaconda安装常用配置及命令
    MySQL获取周、月、天日期,生成排序号
    Linux常用查询命令
  • 原文地址:https://www.cnblogs.com/gh0408/p/6260141.html
Copyright © 2020-2023  润新知