Angular.js实例1至5

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hhw199112/article/details/80882575
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="js/angular.min.js"></script>
</head>
<body  ng-app="" >
    <div ng-init="name='Jackson'">
        <div>
            <div><b>实例1</b></div>
            <div><input type="text" ng-model="Word" /></div>
            <div>Hello {{Word}}</div>
            <div>备注:ng-app里设为空字符串</div>
        </div>
        <br />
        <div>
            <div><b>实例2</b></div>
            <div><input type="text" ng-model="Word" /></div>
            <div>Hello {{Word}}</div>
            <div>备注:如果ng-model里的变量名称有重复,那么将和重复的元素具有同样的功能</div>
        </div>
        <br />
        <div>
            <div><b>实例3</b></div>
            <div><span ng-bind="name"></span></div>
            <div>备注:这里是通过span元素绑定,input元素无法绑定</div>
        </div>
        <br />

    </div>


    <div data-ng-init="FirstName='Mark'">
        <div>
            <div><b>实例4</b></div>
            <div><span data-ng-bind="FirstName"></span></div>
            <div>备注:一个项目里只能出现要给ng-app,同一个div里不能同时出现data-ng-init和ng-init</div>
        </div>
        <br/>
        <div>
            <div><b>实例5</b></div>
            <div>计算表达式:5+5={{5+5}}</div>
        </div>
    </div>

    <div>
        <div><b>以上5个实例的ng-app的值均为空字符串</b></div>
    </div>
</body>
</html>

猜你喜欢

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