• AngularJS学习笔记(二)


    一.AngularJS Select(选择框)

    1.使用 ng-options 创建选择框 

    <div ng-app="myApp" ng-controller="myCtrl">

    <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select>

    </div>

    <script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {

    $scope.names = ["Google", "Runoob", "Taobao"];

    });

    </script>

     2.使用 ng-repeat 指令来创建下拉列表

    <div ng-app="myApp" ng-controller="myCtrl">

    <select> <option ng-repeat="x in names">{{x}}</option> </select>

    </div>

    <script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {

    $scope.names = ["Google", "Runoob", "Taobao"];

    });

    </script>

    3.使用了数组作为数据源: x 为键(key), y 为值(value)
    <div ng-app="myApp" ng-controller="myCtrl">

    <p>选择一辆车:</p>

    <select ng-model="selectedCar" ng-options="x for (x, y) in cars"> </select>

    <h1>你选择的是: {{selectedCar.brand}}</h1>

    <h2>模型: {{selectedCar.model}}</h2>

    <h3>颜色: {{selectedCar.color}}</h3>

    <p>注意选中的值是一个对象。</p>

    </div>

    <script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {

    $scope.cars = {

    car01 : {brand : "Ford", model : "Mustang", color : "red"},

    car02 : {brand : "Fiat", model : "500", color : "white"},

    car03 : {brand : "Volvo", model : "XC90", color : "black"}

    } });

    </script>

     表格显示序号可以在 <td> 中添加 $index, 

     过滤器转换为大写: 使用 uppercase,

     排序显示,可以使用 orderBy过滤器

    style="{{$even?'background-color: #f1f1f1':''}}" 隔行变色

    二.AngularJS HTML DOM

    1.ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

    2.ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。

    3.ng-hide 指令用于隐藏或显示 HTML 元素。

    4.ng-click 指令定义了 AngularJS 点击事件。 

     tips:AngularJS 在 <head> 元素中被加载,但也可以在 <body> 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面


    三.AngularJS API

    AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合

    angular.lowercase()转换字符串为小写
    angular.uppercase()转换字符串为大写
    angular.isString()判断给定的对象是否为字符串,如果是返回 true。
    angular.isNumber()判断给定的对象是否为数字,如果是返回 true。

    四. AngularJS 包含

    使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容

  • 相关阅读:
    WebBrowser无法显示招商银行password输入控件的问题
    对流式计算模型的理解
    Dev BarManager使用方法
    创业的需求分析——创业杂记【1】
    使用Apktools反编译apk应用
    【JUnit4.10源码分析】3.4 Description与測试树
    基于KWIC 的keyword匹配算法(管道+过滤器模式下实现)
    纯CSS滑动效果
    PhotoSwipe简介
    包加载失败的解决办法
  • 原文地址:https://www.cnblogs.com/NatChen/p/9116832.html
Copyright © 2020-2023  润新知