Angular - 指令

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/stu_20052369/article/details/86687100

1. ng-app

2.ng-init ng-modal ng-bind

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>

    <div ng-app="" ng-init="firstName='Gao';secondName='Jamie'; 
			    person={firstName:'Gao',secondName:'Jamie'}">
        <!--
             1.ng-init初始化变量
             2.ng-init初始化对象
         -->
        <p>名字 : <input type="text" ng-model="secondName"></p>
        
        <h1>Hello {{secondName}} {{firstName}}</h1>

        <h1>Hello {{secondName + " "+ firstName}} </h1>

        <h1>Hello {{person.secondName +" "+ person.firstName}} </h1>

        <h1 ng-bind='"Hello "+secondName+" "+firstName'></h1>

        <div data-ng-init="names=[{name:'Jamie',city:'葫芦岛'},
				  {name:'kimi',city:'沈阳'},
                                  {name:'Nero',city:'沈阳'}]">
                     <!--ng-init 初始化数组 -->
            <ul>
                <li data-ng-repeat="item in names">{{item.name}} - {{item.city}}</li>
            </ul>

            <h1>Hello {{names[2].name}} </h1>

        </div>

        <!--
            ng-init 初始化 AngularJS 应用程序变量。
            1.不同变量之间用分号;分割。
            2.data-ng-init 和ng-init的用法相同。
            
            ng-bind & 表达式{{}}
            1. ng-bind 和表达式{{}}效果基本上是一样的 。
            2. 如果网页没有被正常地渲染,那么表达式将原型显示出来,
                用户将看到代码显示在网页上,而即使网页发生错误,无法正常渲染数据,
                ng-bind将不会将代码显示在网页上,提供用户体验。
        -->
    </div>

</body>

</html>

猜你喜欢

转载自blog.csdn.net/stu_20052369/article/details/86687100