angular知识点及练习

最新推荐文章于 2022-01-24 15:35:41 发布

qq_41166157

最新推荐文章于 2022-01-24 15:35:41 发布

阅读量226

点赞数

本文链接：https://blog.csdn.net/qq_41166157/article/details/79233368

版权

-----------《angular入门笔记--知识点》--------------------------------------------------------

anglarjs 动态数据绑定：

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model="firstName" 进行同步。

anflar 指令：加在html标签上
常用的指令：
1.ng-app=""指定DOM元素受anglar js影响的作用域
2.ng-init="变量=‘值’;变量=‘值’”指令初始化应用程序数据
3.ng-model 指令把元素值（比如输入域的值）绑定到应用程序

MVC:（mdel：数据 view：视图 controller：控制器）
控制器做数据业务逻辑：（创建数据数据增加数据删除数据查询）

anglar 的特性：

表达式：{{}}需要输出anglar数据变量都可以使用表达式完成
AngularJS 表达式写在双大括号内：{{}}
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量

-------------------angular script代码----------------------==========================

       //模块
           /*var gaoynapp=angular.Module("myApp",[]);//myapp相当于name*/
           var gaoynapp= angular.module("myApp",[]);//name==> myApp
           //控制器
           gaoynapp.controller("ctrlDemo",function($scope){// $scope angular内置对象
               $scope.sex="男";
           //创建数组
           //$scope.stus=[{name:'张三',age:15,sex:'男'},{name:'李四',age:20,sex:'女'}];
           $scope.stus=[]
           //点击添加按钮进行添加====添加到数组stu
           $scope.save = function(){
              $scope.stus.push({name:$scope.name,age:$scope.age,sex:$scope.sex})
           }
           });

</script>

-------------------angular script代码结束----------------------==========================

--------------------------html代码-------------------------------------------------------------

-------------------------------------------html代码结束-------------------------------------

效果图：

qq_41166157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular知识点及练习

-----------《angular入门笔记--知识点》--------------------------------------------------------anglarjs 动态数据绑定：AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。{{ firstName }} 是通过 ng-model="firstName"
复制链接

扫一扫