AngularJS入门-（6）表达式

来源：互联网发布：光大证券 for mac 编辑：程序博客网时间：2024/06/05 08:02

数字

<!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>

阅读全文

0 0