• Angular——内置指令


    内置指令

    ng-app 指定应用根元素,至少有一个元素指定了此属性。
    ng-controller 指定控制器
    ng-show控制元素是否显示,true显示、false不显示
    ng-hide控制元素是否隐藏,true隐藏、false不隐藏
    ng-if控制元素是否“存在”,true存在、false不存在
    ng-src增强图片路径
    ng-href增强地址
    ng-class控制类名
    ng-include引入模板
    ng-disabled表单禁用
    ng-readonly表单只读
    ng-checked单/复选框表单选中
    ng-selected下拉框表单选中

    基本使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .red {
                color: red;
            }
    
            .blue {
                color: blue;
            }
    
            .yellow {
                color: yellow;
            }
        </style>
    </head>
    <body ng-app="App">
    <div ng-controller="DemoController">
        <h1 ng-show="false">ng-show</h1>
        <h1 ng-hide="true">ng-hide</h1>
        <h1 ng-if="false">ng-if</h1>
        <img ng-src="{{path}}">
        <span ng-class="{red:true,blue:true}">ng-class</span>
    </div>
    <script src="../libs/angular.min.js"></script>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoController', ['$scope', function ($scope) {
            $scope.path = './images/2203.png';
        }]);
        //ng-if可以将元素直接移除,ng-show与ng-hide页面虽然看不到,但是检查依然可以看见
        //ng-src scr的值若是一个绑定的值,浏览器渲染的时候会发送请求,因为没解析到脚本,所以不认识这里会有一个小bug,直到
        //解析到了脚本以后才会去替换这个img标签里src的值
        //ng-href同上
    </script>
    </body>
    </html>
  • 相关阅读:
    前端百度地图开发使用总结
    换电脑后如何同步git本地仓库及分支
    vue mint-ui初次使用总结
    git学习入门总结
    深夜,当音乐响起,数据在MySQL中静静的疯狂计算
    且说Tomcat、Servlet、JSP和Spring
    国庆与中秋7天死磕Web的时光
    Android编程初涉,以控制摄像头为例
    谈现阶段如何形成可行的健康生活习惯方案
    说Java网络编程
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/8410435.html
Copyright © 2020-2023  润新知