Angular.js简单介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hhw199112/article/details/80882331
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <script src="js/angular.min.js"></script>
</head>
    <body>

        <div ng-app="myApp" ng-controller="myCtrl">
        <div>
            <input type="text" ng-model="Count" />
            {{Count}}
        </div>
        <div>
            {{5+4}}
        </div>
        <div ng-init="a=1;b=3">
            {{a*b}}
        </div>
        <div ng-init="num=1;price=30">
            总价:<span ng-bind="num*price"></span>
        </div>
        <div ng-init="FirstName='Jack';LastName='Sparrow'">
            {{FirstName+" "+LastName}}
        </div>
        <div ng-init="FirstName1='Louis';LastName2='Lain'">
            <span ng-bind="FirstName1+' '+LastName2"></span>
        </div>
        <div ng-init="Person={name:'jack',age:12}">
            {{Person.name+" "+Person.age}}
        </div>
        <div ng-init="NewPerson={FirstName:'jacksss',Sex:'female'}">
            <span ng-bind="NewPerson.FirstName"></span>
        </div>
        <div ng-init="Point=[32,43,23,543,4,543,4345,345345]">
            {{Point[3]}}
        </div>
        <div ng-init="Array=[23,54,34,23,5,4,34,2,4,5,34,6,5,55]">
            <span ng-bind="Array[4]"></span>
        </div>
        <div ng-init="EngLish='Jack'">
            <input type="text" ng-model="EngLish" />{{EngLish}}
        </div>
        <div ng-init="price2=3;num2=3">
            单价:<input type="number" ng-model="price2" />
            数量:<input type="number" ng-model="num2" />
            {{price2*num2}}
        </div>
        <div ng-init="Names=['jack','smith','john']">
            <ul>
                <li ng-repeat="x in Names">{{x}}</li>
            </ul>
        </div>
        <div ng-init="NameList=[{names:'jack',age:23},{names:'wade',age:34}]">
            <ul>
                <li ng-repeat="x in NameList">
                    {{x.names+" "+x.age}}
                </li>
            </ul>
        </div>
        <runoob-directive></runoob-directive>
         名字:<input type="text" ng-model="realName" />
    </div>
   
        <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.Count = 12;
        });

        app.directive("runoobDirective", function () {
            return {
                template: 'test'
            }
        });
        //app2 = angular.module('myApp2', []);
        app.controller('myCtrl', function ($scope) {
            $scope.realName = 'JACKSON'
        });
    </script>

 </html>

猜你喜欢

转载自blog.csdn.net/hhw199112/article/details/80882331