AngularJS（一）

最新推荐文章于 2021-11-26 14:47:13 发布

昵称已存在lxttttt

最新推荐文章于 2021-11-26 14:47:13 发布

阅读量178

点赞数

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

本文链接：https://blog.csdn.net/weixin_43238931/article/details/114321182

版权

这篇博客介绍了AngularJS的基础知识，包括AngularJS的使用、指令含义、ng-bind和ng-model的用法，以及对象、数组和自定义指令的创建。ng-model用于绑定输入值并进行验证，scope则作为参数传递对象在AngularJS中起着重要作用。

摘要由CSDN通过智能技术生成

AngularJS使用

在标签下面添加

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

指令含义

ng-app=""  定义AngularJS的使用范围
ng-init="变量=值;变量=值"  初始化变量的值，有多个变量时用分号隔开
ng-model="变量"  定义变量名
ng-bind="变量"  绑定变量名，获取该变量的数据，使用双重花括号{
   {
   变量}}获取变量的值
ng-repeat="x in array"  重复循环array数组中的值并克隆HTML元素

ng-bind=""内可以进行字符串的拼接

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <input type="text" ng-model="content">
        <h1>What I want to say is: {
   {
   content}}</h1>

		<div ng-init="a=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in a"> {
   {
    x }} </li>
        </ul>
    </div>
    </div>
</body>
</html>

{ {}}内部可以进行基本的加减乘除取余等运算和其他字符操作

对象

ng-init=""内可以定义对象
例子：

<div ng-app="">
    <div ng-init="person={firstName:'John', lastName:'Johnson'}">
        name is : <

最低0.47元/天解锁文章

昵称已存在lxttttt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录