AngularJS入门-（6）表达式

最新推荐文章于 2023-03-15 15:16:45 发布

炽天使_1985

最新推荐文章于 2023-03-15 15:16:45 发布

阅读量355

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/wzjisking/article/details/76530562

版权

AngularJS 专栏收录该内容

11 篇文章

订阅专栏

数字

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="price=10;number=5">
    <p>总价: {{ price * number }}</p>
</div>

</body>
</html>

字符串

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="name='seraph';introduce='i am a teacher'">

    <p>{{ name + ":" + introduce }}</p>

</div>

</body>
</html>

对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="person={name:'seraph',introduce:'i am a teacher'}">

    <p>姓为 {{ name.introduce }}</p>

</div>

</body>
</html>

数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

    <p>第三个值为 {{ points[2] }}</p>

</div>

</body>
</html>

表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myController">

    <table>
        <tr ng-repeat="x in names">
            <td>{{ x.name }}</td>
            <td>{{ x.country }}</td>
        </tr>
    </table>

</div>
<script >
    angular.module('myApp', []).controller('myController', function($scope) {
        $scope.names = [
            {name:'小刚',country:'Norway'},
            {name:'小明',country:'Sweden'},
            {name:'小红',country:'Denmark'}
        ];
    });

</script>
</body>
</html>