angular基础（一）

最新推荐文章于 2023-07-17 18:34:58 发布

wx_lidysun

最新推荐文章于 2023-07-17 18:34:58 发布

阅读量547

点赞数

分类专栏： Javascript 框架插件文章标签： angular

本文链接：https://blog.csdn.net/lidysun/article/details/54930357

版权

Javascript 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

框架插件

14 篇文章 0 订阅

订阅专栏

–*指令 end

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<script src="angular.min.js"></script>
<style>
    .custom-html{color:red;}
</style>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl" ng-init="cost=5;num=4;address={province:'shenzhen',detail:'nanshan'};age=[25,26,27]">
    姓：<input type="text" ng-model="firstName"><br>
    名：<input type="text" ng-model="lastName"><br>
    全名：{{firstName + ' ' + lastName}}<br>
    <ul ng-repeat="value in age">
        {{value}}岁?
    </ul>
    年龄：{{age[2]}} <br>
    4*5 = {{cost * num}} <br>
    居住地：{{address.province+' '+address.detail}} <br>
    <ul ng-repeat="value in country">
        {{value.name}} : {{value.num}}枚金牌
    </ul>
    <custom-html></custom-html> <!-- E -->
    <div custom-html></div> <!-- A -->
    <div class="custom-html"></div> <!-- C -->
    <!-- M  replace:true -->
    <!-- directive: custom-html -->
</div>

<script>
    var app = angular.module('myApp',[]); //demo中ng-app为‘myApp’元素是angular应用程序
    app.controller('myCtrl',function($scope){ //myApp应用程序是由什么数据内容控制的
        $scope.firstName = "SUN";
        $scope.lastName = "GANG";
        $scope.country = [
            {num:25,name:'中国'},
            {num:3,name:'USA'},
            {num:0,name:'JP'},
        ]
    });

    app.directive("customHtml",function(){
        return {
            restrict : "AECM",
            replace : true,
            template:"<h3>directive用于自定义标签内容！</h3>"
        }
    })
</script>

</body>
</html>