Angularjs基础(三)

    AngularJS ng-model 指令
    ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值
ng-model指令
    ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。
      实例:
        <div ng-app="myApp" ng-controller="myCtrl">
            名字:<input ng-model="name">
        </div>
        <script>
          var app = angular.module('mgApp',[]);
          app.controller('myCtrl',function($scope){
              $scope.name = "John Doe";
          })
      </script>

双向绑定
    双向绑定,在修改输入域的值时,AngularJS属性的值也将修改:
      实例:
        <div ng-app="myApp" ng-controller="myCtrl">
          名字:<input ng-model="name">
          <h1>你输入了:{{name}}</h1>
        </div>

验证用户输入
    实例:
      <form ng-app="" name="myForm">
        Email:
          <input type="email" name="myAddress" ng-model="text">
          <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
      </form>
      以上实例中,提示信息会在ng-show 属性返回true的情况下显示

应用状态
    ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error)
      实例:
        <from ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
            Email:
            <input type="email" name="myAddress" ng-model="myText" required>
            <h1>状态</h1>
            {{myForm.myAddress.$valid}}
            {{myForm.myAddress.$dirty}}
            {{myForm.myAddress.$touched}}
        </from>

CSS 类
    ng-model指令基于他们的状态为HTML 元素提供了CSS类:
      实例;
        <style>
            input .ng-invalid{
              background-color:lightblue;
            }
        </style>
        <body>
          <from ng-app="" name="myForm">
            输入你的名字:
            <input name="myAddress" ng-model="text" required>
          </from>
        </body>
        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对象当做一个参数传递:
          实例: 控制器中的属性对应了视图上的属性:
            <div ng-app="myApp" ng-controller="myCtrl">
                <h1>{{carname}}</h1>
            </div>
            <script>
                var app = angular.module('myApp',[]);
                app.controller('myCtrl',function($scope){
                $scope.carname = "Volvo";
                })
            </script>
            当在控制器中添加$scope对象时,视图(HTML)可以获取了这些属性
            视图中,你不需要添加$scope前缀,只需要添加属性名即可,如{{carname}}。

Scope概述
    AngularJS应用组成如下:
    View(视图),即HTML。
    Model(模型),当前视图中可用的数据。
    Controller(控制器),即JavaScript 函数,可以添加或修改属性。
    scope 是模型。
    scope是一个JavaScript对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
      实例: 如果你改变了视图,模型和控制器也会相应更新。
        <div ng-app="myApp" ng-controller = "myCtrl">
            <input ng-model="name">
              <h1>我的名字是{{name}}</h1>
        </div>
        <script>
          var app = angular.module('myApp',[]);
          app.controller('myCtrl',function($scope){
              $scope.name = "John Dow";
          })
        </script>

Scope 作用范围
    了解你当前使用的scope是非常重要的。
      实例:当我们使用ng-repeat 指令时,没个重复项都访问了当前的重复对象。
        <div ng-app="myApp" ng-controller="myCtrl">
          <ul>
            <li ng-repeat="x in name"></li>
          </ul>
        </div>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('myCtrl',function($scope){
              $scope.names = ["Emil","Tobias","Linus"]
            });
        </script>
        每个<li>元素可以访问当前的重复对象,这里对应用的是一个字符串,并使用变量x 表示。

根作用域
    所有的应用都有一个$rootScope,它可以作用在ng-app 指令包含的所有HTML 元素中。
    $rootScope可作用域整个应用中,是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。
    实例:创建控制器时,将$rootScope作为参数传递,可在应用中使用:
      <div ng-app="myApp" ng-controller="myCtrl">
          <h1>{{lastname}} 家族成员:</h1>
          <ul>
              <li ng-repeat="x in name">{{x}}{{lastname}}</li>
          </ul>
      </div>
      <script>
          var app = angular.module('myApp',[]);
          app.controller('myCtrl',function($scope,$rootScope){
            $scope.names = ["Emil","Tobias","Linus"];
            $rootScope.lastname = "Refsnes";
          })
      </script>

 

    AngularJS 控制器
    AngularJs 控制器 控制AngularJS 应用程序的数据。
    AngularJS 控制器是常规的JavaScript对象。
AngularJS 控制器
      AngularJS 应用程序被控制器控制。
      ng-controller指令定义了应用程序控制器。
      控制器时JavaScript对象,由标准的JavaScript对象的构造函数 创建。
        实例:
          <div ng-app="myApp" ng-controller="myCtrl">
              名:<input type="text" ng-model = "firstName"><br>
              姓:<input type="text" ng-model = "lastName">
              姓名:{{firstName "" lastName}}
          </div>
          <script>
            var app = angular.module('myApp',[]);
            app.controller('myCtrl',function($scope){
                $scope.firstName = "John";
                $scope.lastName = "Doe";
              })
          </script>
      应用解析:
          AngularJS 应用程序由ng-app定义。应用程序在<div>内运行。
          ng-controller = "myCtrl" 属性是一个Angular 指令。用于定义一个控制器。
          myCtrl 函数是一个JavaScript 函数。
          AngularJS 使用$scope对象来调用控制器。
          在AngularJS 使用$scope是一个应用像(属于应用变量和函数)
          控制器的$scope(相当于作用域,控制范围)用来保存AngularJS Mode(模型)的对象。
          控制器在作用域中创建两个属性(firstName 和lastName)。
          ng-model 指令绑定输入域到控制器的属性(firstName 和lastName)。

控制器方法
    上面的石磊演示了一个带有lastName 和firstName 这两个属性的控制器对象。
    控制器也可以有方法变量和函数
    实例
        <div ng-app="myApp" ng-controller="personCtrl">
          名:<input type="text" ng-model="firstName">
          姓:<input type="text" ng-model="lastName">
          姓名:{{fullName()}}
        </div>
        <script>
          var app = angular.module('myApp',[]);
          app.controller('personCtrl',function($scope){
              $scope.firsName = "John";
              $scope.lastName = "Doe";
              $scope.fullName = function(){
                return $scope.firstName "" $scope.lastName;
            }
          })
        </script>

外部文件中的控制器
    在大型的应用程序中,通常是把控制器存储在外部文件中。
    只需要把<script>标签中的代码复制到名为personController.js的外部文件中即可:
      实例:
          <div ng-app="myApp" ng-controller = "personCtrl">
              First Name:<input type="text" ng-model = "firstName">
              Last Name:<input type="text" ng-model="lastName">
              Full Name:{{firstName " " lastName}}
          </div>
          <script src="personController.js"></script>

其他实例
    实例:
      angular.module('myApp',[]).controller('namesCtrl',function($scope){
      $scope.names = [
          {name:'Jani',country:'Norway'},
          {name:'Hege',country:'Sweden'},
          {name:'Kai',country:'Denmark'}
        ];
      });
    <div ng-repeat="myApp" ng-controller="nameCtrl">
      <ul>
        <li ng-repeat="x in name">
          {{x.name 'x' x.country]}}
        </li>
      </ul>
    </div>
    <script src="namesController.js"></script>


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361282.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET MVC的生命周期与网址路由

网址路由&#xff08;Routing&#xff09;在ASP.NET MVC中有两个主要用途&#xff0c;一个用途是匹配通过浏览器传来的HTTP请求&#xff0c;另一个用途则是将适当的网址返回浏览器。 首先我们来看下第一个用途&#xff0c;也就是匹配通过浏览器传来的HTTP请求。 客户端对ASP.NE…

ecshop分页类assign_pager分析和扩展

ecshop分页类assign_pager分析和扩展,我们前面的文章中介绍过ecshop ajax分页&#xff0c;他的基础都是简单单一的分页。如果我们要在ecshop分页里面传入自己的参数&#xff0c;你就必须对ecshop的assign_pager分页函数进行系统的认识和分析。 首先我们看category.php的ecshop分…

NEC css规范

CSS规范 - 分类方法 SS文件的分类和引用顺序 通常&#xff0c;一个项目我们只引用一个CSS&#xff0c;但是对于较大的项目&#xff0c;我们需要把CSS文件进行分类。 我们按照CSS的性质和用途&#xff0c;将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”&#…

JDK 8中的流驱动的集合功能

这篇文章介绍了JDK 8的应用–引入了带有集合的 流 &#xff0c;以更简洁地完成通常需要的与集合相关的功能。 在此过程中&#xff0c;将演示并简要说明使用Java Streams的几个关键方面。 请注意&#xff0c;尽管JDK 8 Streams通过并行化支持提供了潜在的性能优势&#xff0c;但…

知识汇集

Oracle中锁介绍&#xff1a;http://space.itpub.net/26961876/viewspace-731300转载于:https://www.cnblogs.com/yaohonv/archive/2012/08/18/tech-col.html

jquery mobile 移动web(5)

有序列表   <div data-role"content">     <ol data-role"listview" data-theme"g">       <li><a href"#"> List 1</a></li>       <li><a href"#"> L…

cjmx:JConsole的命令行版本

当监视正在运行的Java应用程序时&#xff0c;JConsole是一个很好的工具。 但是&#xff0c;当无法使用JConsole直接连接到JVM&#xff08;例如&#xff0c;由于网络限制&#xff09;并且无法进行SSH隧道传输时&#xff0c;那么拥有命令行版本的JConsole会很棒。 jcmx是JConsol…

Android中SQLiteDatabase操作【附源码】

像我们做的很多应用程序及网站一样&#xff0c;基本都是对数据库进行增删改查来实现相应的功能。那么Android开发也一样&#xff0c;不过由于在移动客户端应用&#xff0c;所以不会像sql server、mysql那么复杂&#xff0c;Android应用程序支持本地数据库&#xff0c;SQLiteDat…

移动设备HTML5页面布局

在HTML5标准添加的新元素中&#xff0c;用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。 下面简单介绍一下这个元素&#xff1a; 1.header header>元素定义文档的页面组合&#xff0c;通 常是一些引导和导航信息&#xff0c;标签…

Hazelcast入门指南第5部分

这是我撰写的有关Hazelcast的一系列文章的延续。 我强烈建议您阅读其他内容&#xff1a; 第1 部分 &#xff0c; 第2 部分 &#xff0c; 第3 部分和第4部分 。 让人一见倾心的东西&#xff1f; 这篇文章中将没有Hazelcast专用代码。 让我重复一遍。 这篇文章中将没有Hazelcast…

【BEV感知算法概述——下一代自动驾驶感知算法】

文章目录 BEV感知算法概念BEV感知算法数据集介绍BEV感知算法分类BEV感知算法的优劣小结 BEV感知算法概念 Bird’s-Eye-View&#xff0c;鸟瞰图&#xff08;俯视图&#xff09;。BEV感知算法存在许多的优势。 首先&#xff0c;BEV视图存在遮挡小的优点&#xff0c;由于视觉的透…

jquery鼠标事件

click()   为点击事件绑定一个事件处理函数&#xff0c;或者触发元素点击事件。   .click( handler(eventObject) )     handler(eventObject)       每次事件触发时候执行的函数。   .click([eventData],handler(eventObject))     eventData      …

[LaunchPad] 超声波测试,数码管显示

1 #include "io430g2553.h"2 3 unsigned char Disp_Tab[] {0x3f,0x06,0x5b,0x4f,0x66,0x6d,0x7d,0x07,0x7f,0x6f,0x40}; //段码控制 4 unsigned char dispbit[8]{0xfe,0xfd,0xfb,0xf7,0xef,0xdF,0xbF,0x7F}; //位选控制 5 6 unsigned char LedOut[4];7 8 …

Spring的依赖注入陷阱

Spring框架中有三种注入变量&#xff1a; 基于二传手的注射 基于构造函数的注入 基于现场的注入 这些机制中的每一种都有优点和缺点&#xff0c;并且不仅只有一种正确的方法。 例如现场注入&#xff1a; Autowired private FooBean fooBean;在生产代码中使用它通常不是最好…

jquery 操作css 选择器

.addClass()   为每个匹配的元素添加指定的样式类名   .addClass(className)     className 为每个匹配元素所有增加的一个或多个样式名   .addClass(function(index,currentClass))     函数返回一个或者多个用空格隔开&#xff0c; index 表示参数匹配中的索引…

vim设置

一、基本编辑功能1、复制、剪切和粘贴复制特定的某一段&#xff1a;把光标移到要复制的文本的头部&#xff0c;按下“v”&#xff0c;往后移动光标&#xff0c;光标所过之处的字符>都会高亮&#xff0c;移到欲复制文本的尾部后&#xff0c;按下“y”&#xff0c;高亮文本全部…

jquery表单属性筛选元素

$(":button") 选择所有按钮元素类型为按钮的元素。 等于$(input[type"button"]) $(":checkbox") 选择所有类型为复选框的元素。 等于$(input[type"checkbox"]) $(":checked") 选择所有勾选的元素。 $( "input:checked&…

Hamcrest Matchers的高级创建

介绍 上一次 &#xff0c;我讨论了Hamcrest Matcher是什么&#xff0c;如何使用以及如何制作。 在本文中&#xff0c;我将解释创建Hamcrest Matchers的更多高级步骤。 首先&#xff0c;我将分享如何使您的匹配器更易于类型安全&#xff0c;然后介绍无状态匹配器的一些技术&…

嵌入式成长轨迹37 【Zigbee项目】【CC2430基础实验】【自动闪烁】

最为简单的代码&#xff0c;只用到一个寄存器P1DIR。因为点亮的led灯&#xff08;p1.0和p1.1&#xff09;的管脚是p1的&#xff0c;要输出就得将这两个管脚设置为输出管脚。该寄存器用0~8对应1.0~1.8管脚。 1 //main.c2 #include <ioCC2430.h>3 4 #define uint unsigned …

博客园CodingLife模板样式优化

博客园CodingLife模板样式优化&#xff0c;小屏和大屏均做了优化&#xff0c;感兴趣的园友可以复制到你的页面定制CSS代码中&#xff0c; 源码地址&#xff1a;http://www.cnblogs.com/blog/customcss/334547.css 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com