Angularjs

最新推荐文章于 2022-02-26 13:06:23 发布

原创最新推荐文章于 2022-02-26 13:06:23 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

本文通过实例演示了如何使用AngularJS实现数据绑定、表达式计算等功能。介绍了AngularJS中指令的使用方法，如ng-app、ng-model、ng-bind等，并展示了如何通过ng-init初始化作用域变量。

<!DOCTYPE html>
<html>//算法  表达式
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
</head>
<body ng-app="">

<div >
    <p>名字:<input type="text" ng-model="name"></p>
    <h1>Hellow{{name}}</h1>
</div>

<div  ng-init="firstName='John'">
    <p>姓名为 <span ng-bind="firstName"></span></p>
</div>
<div >
    <p>这是第一个表达式:{{5+5}}</p>
</div>
<div ng-init="a=21;c=3">
   <p>总价{{a+c}}</p>
</div>
<div ng-init="quantity=1;cost=5">
    <p>总价： <span ng-bind="quantity * cost"></span></p>
</div>
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
    <p>姓名： {{ firstName + " " + lastName }}</p>
</div>
<div ng-init="person={f:'aa',g:'asd'}">
    <p>名为{{person.f}}</p>
</div>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
    <p>第三个值为 {{ points[2] }}</p>
</div>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
    <p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>
</body>
</html>