angular基础（一）

来源：互联网发布：淘宝大码学生女装店编辑：程序博客网时间：2024/05/19 18:47
–*指令 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>
0 0