首页 > 代码库 > Angular内置指令（一）

Angular内置指令（一）

2024-08-21 13:22:46   217人阅读

要注意的是不要把自己开发的指令以ng开头，以免与内置指令冲突 

目录：ng-disabled，ng-readonly，ng-checked，ng-selected，ng-href，ng-src，ng-class，ng-style

 

ng-disabled

当它的值返回true时表示禁用当前元素，返回false时什么都不做

<body>
<!--在文本框输入内容时禁用按钮-->
<input type="text" ng-model="name"/>
<button ng-disabled="!name">disabled</button>

<!--3秒后input框变为可用状态-->
<div ng-controller="myController">
    <input type="text" ng-disabled="trueFalse"/>
</div>

<!-- ng-readonly --><!-- true只读，false正常使用 -->
<input type="text" ng-readonly="true"/>

<script>
    angular.module("myApp",[])
            .controller("myController",function($scope,$timeout){
                $scope.trueFalse = true;
                $timeout(function(){
                    $scope.trueFalse = false;
                },3000)

            })
</script>
</body>

 

 

ng-readonly

同ng-disabled一样的用法，这个指令是设置是否只读

 

ng-checked

同ng-disabled一样的用法，true选中，false不选中

 


ng-selected

同样是true选中，false不选中

 


ng-href

如果用a链接的href的话,给页面绑定的数据没有过来的时候点击文本会刷新本页面，如果用ng-href的话，数据没有过来的时候链接是不可以点击的

<body>
<!--延迟两秒给页面输送数据，如果用a链接的href的话数据没有过来的时候点击文本会刷新本页面，
如果用ng-href的话，数据没有过来的时候链接是不可以点击的-->
<div ng-controller="myController">
    <a ng-href="{{ myHref }}">myhref</a>
</div>


<script>
    angular.module("myApp",[])
            .controller("myController",function($scope,$timeout){
                $timeout(function(){
                    $scope.myHref = ‘http://www.baidu.com‘;
                },2000)
            })
</script>
</body>

 

ng-src

同a链接的href是一个道理，ng-src在数据还没有过来的时候是不会加载图片的，src在数据没有加载过来的时候会报错

 

ng-class   ng-class-odd       ng-class-even

根据表达式条件返回的布尔值添加对应的class名。可以添加多个class，每个用逗号隔开ng-class-odd ng-class-even 表示奇数行和偶数行的样式

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../Angular/angular.min.js"></script>
    <style>
        .classRed{
            background:red;
        }
        .classGreen{
            background:green;
        }
    </style>
</head>
<body>
<div>
    <!-- 条件返回true 表示添加 条件返回false表示不添加。可以添加多个表达式来判断添加某个class样式-->
    <p ng-class="{classRed:1+1 == 3,classGreen:1+1 ==2}">ddd</p>
</div>
<div ng-controller="myController">
    <!-- 还可以指定奇数和偶数行的样式，注意引号的写法-->
    <ul>
        <li ng-repeat="v in arr" ng-class-even="‘classRed‘" ng-class-odd="‘classGreen‘">{{v}}</li>
    </ul>
</div>
<script>
    angular.module("myApp",[])
            .controller("myController",function($scope){
                $scope.arr = [1,2,3,4,5,6,7,8,9,0];
            });
</script>
</body>
</html>

 

ng-style

使用angular添加样式，以 key:value 的形式

<body>
<!--以键值对的形式给元素指定样式-->
<div ng-controller="myController">
    <p ng-style="objCss"></p>
</div>
<script>
    angular.module("myApp",[])
            .controller("myController",function($scope){
                $scope.objCss = {
                    width:‘200px‘,
                    height:‘200px‘,
                    background:‘red‘
                }
            })
</script>
</body>

Angular内置指令（一）


联系
我们