zoukankan      html  css  js  c++  java
  • AngularJS学习笔记2

    3.AngularJS 表达式

    AngularJS 表达式写在双大括号内:{{ expression }}。AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。它们可以包含文字、运算符和变量。

    AngularJS 实例

    <div ng-app="" ng-init="firstName='John';lastName='Doe'">
    
    <p>姓名: {{ firstName + " " + lastName }}</p>
    
    </div>

     

    AngularJS 对象就像 JavaScript 对象:

    AngularJS 实例

    <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
    
    <p>姓为 {{ person.lastName }}</p>
    
    </div>

    AngularJS 表达式 与 JavaScript 表达式

    类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。

    与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。

    与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。

    与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

    4.AngularJS ng-model

    ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

    <div ng-app="myApp" ng-controller="myCtrl">
    
    名字: <input ng-model="name">
    
    </div>
    <script>
    
    var app = angular.module('myApp', []);
    
    app.controller('myCtrl', function($scope) {
    
        $scope.name = "John Doe";
    
    });
    
    </script>

    <p>修改输入框的值,标题的名字也会相应修改。</p>

    验证用户输入

     

    <form ng-app="" name="myForm">
    
        Email:
    
        <input type="email" name="myAddress" ng-model="text">
    
        <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
    
    </form>

    ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:

     

    <style>
    
    input.ng-invalid {
        background-color: lightblue;
    }
    
    </style>
    <body>
    
    <form ng-app="" name="myForm">
        输入你的名字:
        <input name="myAddress" ng-model="text" required>
    </form>

    ng-model 指令根据表单域的状态添加/移除以下类:

    • ng-empty
    • ng-not-empty
    • ng-touched
    • ng-untouched
    • ng-valid
    • ng-invalid
    • ng-dirty
    • ng-pending
    • ng-pristine

     

    5.AngularJS Scope(作用域)

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

    Scope 是一个对象,有可用的方法和属性。

    Scope 可应用在视图和控制器上。

    控制器中的属性对应了视图上的属性:

    <<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>

    所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。

  • 相关阅读:
    MyBatis 最常见错误,启动时控制台无限输出日志
    mybatis.generator.configurationFile
    MBG 相关资源链接
    MyBatis Generator 详解 专题
    随笔分类
    android 播放assets文件里视频文件的问题
    AssetManager中的路径参数不能包含"assets/"
    Android---intent传递putStringArrayListExtra
    android中使用setVideoURI()播放视频
    vitamio官方demo源码分析
  • 原文地址:https://www.cnblogs.com/corolcorona/p/6707660.html
Copyright © 2011-2022 走看看