Angular.js的学习1.0

最新推荐文章于 2023-01-10 14:22:55 发布

Srain13

最新推荐文章于 2023-01-10 14:22:55 发布

阅读量386

点赞数

分类专栏： Angular.js 文章标签： Angular.js JavaScript 简单的Angular.js

本文链接：https://blog.csdn.net/Srain13/article/details/79133543

版权

Angular.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Angular.js的学习1.0

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 script标签添加到HTML 页面。
AngularJS能做什么：
解决重复劳动—获取、事件、创建
接管UI
AngularJS好处在哪儿：自动同步
局限：
Angular是一个MVC‘框架’：数据是核心（特点）

举个栗子：
我希望实现一个效果是输入d1的值后在d2中也显示d1的值。

未使用Angular.js

1.先document获取d1/d2。
2.将d1的值赋值给d2
那么这样的话就会产生了重复的代码。

<input type="text" name="name" value="" id="d1">
<input type="text" name="name" value="" id="d2">

那么如果使用了Angular.js呢？

//1.引入angular.js
<script type="text/javascript" src="angular.js"></script>

<body>
    //2.定义angular.js的范围 <html ng-app="">
    //3.数据从哪来 ng-model="a" 给模型取一个名字为a
    <input type="text" name="name" value="" ng-model="a">
    //4.数据到哪去 ng-bind="a" 绑定a的数据
    <div class="" ng-bind="a"></div>
</div>
</body>

但是呢，上面只有用如果我想在div中添加文字那么则会被吞掉，不显示我的文字。如何解决？

    <input type="text" name="name" value="" ng-model="a">
    <input type="text" name="name" value="" ng-model="b">
    //{{}}这个相当于一个占位符，就像前台获取后台传的值el表达式一样{$}
    <div class="">结果是：{{a*b}}</div>

这写打开网站时则会显示一开始的结果为：NaN
那么如何解决这个问题？

ng-init 初始化值
将a,b的值初始化为0

Srain13

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular.js的学习1.0

Angular.js的学习1.0AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 script标签添加到HTML 页面。AngularJS能做什么：解决重复劳动—获取、事件、创建接管UIAngularJS好处在哪儿：自动同步局限：Angular是一个MVC‘框架’：数据是核心（特点）举个栗子：我希望实现一个效果
复制链接

扫一扫