加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angularjs基础(三)

发布时间：2020-12-17 10:39:58 所属栏目：安全 来源：网络整理
导读：AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到HTML 控制器（input,select,textarea）的值 ng-model指令 ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。 实例： 名字： 双向绑定 双向绑定，在修改输入域的值时，AngularJS属性的

　　　　AngularJS ng-model 指令
　　　　ng-model 指令用于绑定应用程序数据到HTML 控制器（input,select,textarea）的值
ng-model指令
　　　　ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。
　　　　　　实例：
　　　　　　　　

　　　　　　　　　　　　名字： 　　　　　　　　

　　　　　　　　

双向绑定
　　　　双向绑定，在修改输入域的值时，AngularJS属性的值也将修改：
　　　　　　实例：
　　　　　　　　

　　　　　　　　　　名字： 　　　　　　　　　　

你输入了：{{name}}


　　　　　　　　

验证用户输入
　　　　实例：
　　　　　　

　　　　　　　　Email:
　　　　　　　　　　 　　　　　　　　　　
　　　　　　
　　　　　　以上实例中，提示信息会在ng-show 属性返回true的情况下显示

应用状态
　　　　ng-model指令可以为应用数据提供状态值（invalid,dirty,touched,error）
　　　　　　实例：
　　　　　　　　 　　　　　　　　　　　　Email:
　　　　　　　　　　　　
　　　　　　　　　　　　

状态


　　　　　　　　　　　　{{myForm.myAddress.$valid}}
　　　　　　　　　　　　{{myForm.myAddress.$dirty}}
　　　　　　　　　　　　{{myForm.myAddress.$touched}}
　　　　　　　　

CSS 类
　　　　ng-model指令基于他们的状态为HTML 元素提供了CSS类：
　　　　　　实例;
　　　　　　　　
　　　　　　　　
　　　　　　　　　　 　　　　　　　　　　　　输入你的名字：
　　　　　　　　　　　　
　　　　　　　　　　
　　　　　　　　
　　　　　　　　ng-model 指令根据表单域的状态添加/移除一下类
　　　　　　　　ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid
　　　　　　　　ng-dirty ng-pending ng-pristine

AngularJS Scope(作用域)

Scope(作用域) 是应用在HTML(视图)和JavaScript(控制器)之间的纽带。
　　　　　　　　Scope是一个对象，有可能的方法和属性。
　　　　　　　　Scope可应用在视图和控制器上。

如何使用Scope
　　　　　　当你在AngularJS创建控制器时，你可以将$scope对象当做一个参数传递：
　　　　　　　　　　实例： 控制器中的属性对应了视图上的属性：
　　　　　　　　　　　　

　　　　　　　　　　　　　　　　

{{carname}}


　　　　　　　　　　　　

　　　　　　　　　　　　
　　　　　　　　　　　　当在控制器中添加$scope对象时，视图（HTML）可以获取了这些属性
　　　　　　　　　　　　视图中，你不需要添加$scope前缀，只需要添加属性名即可，如{{carname}}。

Scope概述
　　　　AngularJS应用组成如下：
　　　　View(视图)，即HTML。
　　　　Model(模型)，当前视图中可用的数据。
　　　　Controller(控制器)，即JavaScript 函数，可以添加或修改属性。
　　　　scope 是模型。
　　　　scope是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
　　　　　　实例： 如果你改变了视图，模型和控制器也会相应更新。
　　　　　　　　

　　　　　　　　　　　　 　　　　　　　　　　　　　　

我的名字是{{name}}


　　　　　　　　

　　　　　　　　

Scope 作用范围
　　　　了解你当前使用的scope是非常重要的。
　　　　　　实例：当我们使用ng-repeat 指令时，没个重复项都访问了当前的重复对象。
　　　　　　　　

　　　　　　　　　　

    　　　　　　　　　　　　

  • 　　　　　　　　　　

　　　　　　　　

　　　　　　　　
　　　　　　　　每个
  • 元素可以访问当前的重复对象，这里对应用的是一个字符串，并使用变量x 表示。

    根作用域
    　　　　所有的应用都有一个$rootScope,它可以作用在ng-app 指令包含的所有HTML 元素中。
    　　　　$rootScope可作用域整个应用中，是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。
    　　　　实例：创建控制器时，将$rootScope作为参数传递，可在应用中使用：
    　　　　　　

    　　　　　　　　　　

    {{lastname}} 家族成员：


    　　　　　　　　　　

      　　　　　　　　　　　　　　

    • 　　　　　　　　　　

    　　　　　　

    　　　　　　

    　　　　AngularJS 控制器
    　　　　AngularJs 控制器 控制AngularJS 应用程序的数据。
    　　　　AngularJS 控制器是常规的JavaScript对象。
    AngularJS 控制器
    　　　　　　AngularJS 应用程序被控制器控制。
    　　　　　　ng-controller指令定义了应用程序控制器。
    　　　　　　控制器时JavaScript对象，由标准的JavaScript对象的构造函数 创建。
    　　　　　　　　实例：
    　　　　　　　　　　

    　　　　　　　　　　　　　　名：
    　　　　　　　　　　　　　　姓： 　　　　　　　　　　　　　　姓名：{{firstName +""+lastName}}
    　　　　　　　　　　

    　　　　　　　　　　
    　　　　　　应用解析：
    　　　　　　　　　　AngularJS 应用程序由ng-app定义。应用程序在
    内运行。
    　　　　　　　　　　ng-controller = "myCtrl" 属性是一个Angular 指令。用于定义一个控制器。
    　　　　　　　　　　myCtrl 函数是一个JavaScript 函数。
    　　　　　　　　　　AngularJS 使用$scope对象来调用控制器。
    　　　　　　　　　　在AngularJS 使用$scope是一个应用像（属于应用变量和函数）
    　　　　　　　　　　控制器的$scope(相当于作用域，控制范围)用来保存AngularJS Mode(模型)的对象。
    　　　　　　　　　　控制器在作用域中创建两个属性（firstName 和lastName）。
    　　　　　　　　　　ng-model 指令绑定输入域到控制器的属性（firstName 和lastName）。

    控制器方法
    　　　　上面的石磊演示了一个带有lastName 和firstName 这两个属性的控制器对象。
    　　　　控制器也可以有方法变量和函数
    　　　　实例
    　　　　　　　　

    　　　　　　　　　　名： 　　　　　　　　　　姓： 　　　　　　　　　　姓名：{{fullName()}}
    　　　　　　　　

    　　　　　　　　

    外部文件中的控制器
    　　　　在大型的应用程序中，通常是把控制器存储在外部文件中。
    　　　　只需要把

    其他实例
    　　　　实例：
    　　　　　　angular.module('myApp',[]).controller('namesCtrl',function($scope){
    　　　　　　$scope.names = [
    　　　　　　　　　　{name:'Jani',country:'Norway'},
    　　　　　　　　　　{name:'Hege',country:'Sweden'},
    　　　　　　　　　　{name:'Kai',country:'Denmark'}
    　　　　　　　　];
    　　　　　　});
    　　　　

    　　　　　　

      　　　　　　　　
    • 　　　　　　　　　　{{x.name +'x' +x.country]}}
      　　　　　　　　

      • 　　　　　　

    　　　　

    　　　　
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同