Angularjs基础(五)

AngularJS Select(选项框)
    AngularJS 可是使用数组或对象创建一个下拉列表选项。
使用ng-options创建选项框
    在AngularJS 中我们可以使用ng-option指令来创建一个下拉列表,列表通过对象和数组循环输出
      实例:
        <div ng-app="myApp" ng-controller="myCtrl">
            <select ng-model="selectedName" ng-options="x for in names"></select>
        </div>
        <script>
            var app = angular.module(‘myApp‘,[]);
            app.controller(‘myCtrl‘,function($scope){
              $scope.name = ["Google","Runoob","Taobao"];
            })
        </script>

ng-options 与 ng-repeat
    我们也可以使用ng-repeat指令来创建下拉列表
    <select>
      <option ng-repeat="x in name">{{x}}</option>
    </select>
    ng-repeat指令是通过数组来循环HTML 代码来创建下拉列表,但ng-options指令更适合创建下拉列表,它有一下优势
    使用ng-options的选项的一个对象,ng-repeat是一个字符串。

应该用那个更好?
    假设我们使用以下对象:
      $scope.sites = [{site : "Google",url:"http://www.google.com"},
      $scope.sites = [{site : "Runoob",url:"http://www.runoob.com"},
      $scope.sites = [{site : "Taobao",url:"http://www.runoob.com"}]
      ng-repeat有局限性,选择的值是一个字符串:
        实例:
          <select ng-model="selectedSite">
              <option ng-repeat="x in sites" value="{{x,url}}">{{x.site}}</option>
          </select>
          <h1>你选择的是:{{selectedSite}}</h1>
        实例:
     使用ng-options:
        <select ng-model="selectedSite" ng-options="x.site for x in sites"></select>
        <h1>你选择的是:{{selectedSite.site}}</h1>
        <p>网址为:{{selectedSite.url}}</p>
      当选择值是一个对象时,我们就可以获取更多信息,应用也更灵活。

数据源为对象
    前面实例我们使用了数组作为数据源,以下我们将数据对象作为数据源。
        $scope.sites = {
            site01 :"Google",
            site02:"Runoob",
            site03 :"Taobao"
        };
      实例
        使用对象作为数据源,x 为键(key),y为值(value);
          <select ng-model="selectedSite" ng-options="x for (x,y) in sites">
          </select>
          <h1>你选择的值是:{{selectedSite}}</h1>
        你选择的值在key-value对中的value
          value 在key-value 对中也可以是个对象;
          实例
        选择的值在key-value 对的value 中,这是 它是一个对象。
          $scope.cars = {
              car01 : {brand : "Ford",model :"Mustang", color :"red"},
              car02 : {brand : "Fiat",model :"500", color :"white"},
              car03 : {brand : "Fiat",model :"XC90", color :"black"},
            }
      在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性:
        <select ng-model="selectedCar" ng-options="y.brand for (x,y) in sites "></select>

AngularJS 表格
      ng-repeat 指令可以完美的显示表格。

在表格中显示数据
      使用angular显示表格是非常简单的
        实例
          <div ng-myApp="myApp" ng-controller="customersCtrl">
            <table>
              <tr ng-repeat = "x in names">
                <td>{{x.Name}}</td>
                <td>{{x.Country}}</td>
              </tr>
            </table>
          </div>
          <script>
              var app= angular.module(‘myApp‘,[]);
              app.controller(‘customersCtrl‘,function($scope,$http){
                  $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php").
                  success(function (response) {$scope.names = response.records;});
              })
        </script>

使用CSS样式
      为了让页面更加美观,我们可以在页面中使用CSS
     css 样式
      <style>
          table, th ,td{
              border:1px solid grey;
              border-collapse:collapse;
              padding:5px;
            }
          table tr:nth-child(odd){
              background-color:#f1f1f1;
            }
          table tr:nath-child(even){
              background-color:#ffffff;
          }
      </style>

使用 orderBy 过滤器
    排序显示,可以使用orderBy过滤器:
      实例:
      <table>
          <tr ng-repeat="x in names | orderBy : ‘Country‘">
            <td>{{x.Name}}</td>
            <td>{{x.Country}}</td>
          </tr>
      </table>

使用uppercase 过滤器
    使用uppercase过滤器转换为大写
      实例
        <table>
          <tr ng-repeat="x in names">
            <td>{{x.Name}}</td>
            <td>{{x.Country | uppercase}}</td>
          </tr>
        </table>

显示序号($index)
    表格显示序号可以在<td>中添加$index:
      实例
      <table>
          <tr ng-repeat="x in names">
            <td>{{$index + 1}}</td>
            <td>{{x.Name}}</td>
            <td>{{x.Country}}</td>
          </tr>
      </table>

使用$even 和$odd
    实例
    <table>
      <tr ng-repeat="x in names">
        <td ng-if="$odd" style="background-color:#f1f1f1">{{x.Name}}</td>
        <td ng-if="$even">{{x.Name}}</td>
        <td ng-if="$odd" style="background-color:#f1f1f1">{{x.Country}}</td>
        <td ng-if="$even">{{x.Country}}</td>
      </tr>
    </table>

AngularJS SQL
    使用PHP从MySQL 中获取数据
      实例:
        <div ng-app ="myApp" ng-controller="customersCtrl">
          <table>
              <tr ng-repeat="x in names">
                <td>{{x.Name}}</td>
                <td>{{x.Country}}</td>
              </tr>
          </table>
        </div>
        <script>
            var app = angular.module(‘myApp‘,[]);
            app.controller(‘customersCtrl‘,function($scope,$http){
            $http.get("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php")
              .success(function (response) {$scope.names = response.records;});
          })
      </script>

跨域HTTP请求
      如果你需要从不同的服务器(不同的域名)上获取数据就需要使用跨域HTTP请求。
      跨域请求在网页上非常常见。很多网页从不同服务器上载入CSS,图片,Js 脚本等。
      在现代浏览器中,为了数据的安全,所又请求被严格限制在同一域名下,如果需要调用不同站点数据,需要通过跨域来解决。
      以下的PHP代码运行使用的网站进行跨域访问。
      header("Access-Control-Allow-Origin: *");

时间: 2024-10-12 20:09:35

Angularjs基础(五)的相关文章

AngularJS的五个超酷特性

AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色.在这篇教程中,我们将简单的介绍AngularJS几个重量级必备特性,并且介绍它如何能够让你的web应用更加强大! AugularJS简单介绍 AngularJS是一个新出现的强大客户端技术,提供给大家的一种开发强大应用的方式.这种方式利用并且扩展HTML,CSS和javascript,并且弥补了它们的一些非常明显的不足.本应该使用HTML来实现而现在由它开发的动态一些内容.

转: angularjs基础教程(~~较通俗)

Angularjs-基础教程(1) 很久没有写过东西了,感觉写东西都不知道从哪里开始了,现在还是先写点技术性的吧,angularjs--我兄弟把它叫成“俺哥啦js” 1.下载 官方网址:https://angularjs.org/ CDN:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js 2.简单介绍使用 1.ng-app   ~~~angularjs的渲染范围 决定了angularjs的作用域

将 Shiro 作为应用的权限基础 五:密码的加密/解密在Spring中的应用

考虑系统密码的安全,目前大多数系统都不会把密码以明文的形式存放到数据库中. 一把会采取以下几种方式对密码进行处理 密码的存储 "编码"存储 Shiro 提供了 base64和 16 进制字符串编码/解码的 API支持,方便一些编码解码操作. Shiro内部的一些数据的存储/表示都使用了 base64和 16 进制字符串. 下面两端代码分别对其进行演示 Stringstr = "hello"; Stringbase64Encoded = Base64.encodeTo

为什么我喜欢 AngularJS 的五个理由

AngularJS 是谷歌一个 JavaScript 框架,旨在简化前端应用程序的开发.如果你在开发单页的应用程序,我敢肯定你已经听说过它.我是 AngularJS 的忠实粉丝,在这篇文章中我将概述五条我为什么这么喜欢它的原因. #1 良好的应用程序结构 通常情况下,我们编写 JavaScript 没有明确的结构.虽然在编写小应用程序的时候没有问题,但这显然是不适合于大规模的应用程序.使用 AngularJS,您可以通过MVC(模型 - 视图 - 控制器)或MVVM (模型 - 视图 - 视图模

Java基础五

Java基础五 一.成员变量和局部变量 二.static关键字 三.成员变量和静态变量区别 四.main函数 五.静态函数什么时候用 六.静态代码块 七.构造代码块 构造代码块先于构造函数执行

AngularJS基础01 从HelloWorld说起

作者:arccosxy  转载请注明出处:http://www.cnblogs.com/arccosxy/ 准备工作 首先,创建一个名为index.html的HTML文件,代码如下: <!DOCTYPE html> <head> <title>Learning AngularJS</title> </head> <body> </body> </html> 接下来就是加载angular.js库,访问https:

AngularJS基础知识

AngularJS基础知识 --2015.06.28 1.     AngularJS是什么? Angular官网:https://angularjs.org/ ,API: http://docs.angularjs.org/api AngularJS是一个MV*(Model-View-Whatever, 不管是MVC或者MVVM,统称为MDV(Model Drive View))的JavaScript框架,是Google推出的SPA(single-page-application, 单页面应用

将 Shiro 作为应用的权限基础 五:SpringMVC+Apache Shiro+JPA(hib

点击链接加入群[JavaEE(SSH+IntelliJIDE+Maven)]:http://jq.qq.com/?_wv=1027&k=L2rbHv 将 Shiro 作为应用的权限基础 五:SpringMVC+Apache Shiro+JPA(hibernate)整合配置 配置web.xml,applicationContext.xml, spring-mvc.xml,applicationContext-shiro.xml,而且都有详细的说明. web.xml是web项目最基本的配置文件,看这

将 Shiro 作为应用的权限基础 五:SpringMVC+Apache Shiro+JPA(hibernate)整合配置

配置web.xml,applicationContext.xml, spring-mvc.xml,applicationContext-shiro.xml,而且都有详细的说明. Web.xml是web项目最基本的配置文件,看这个配置,可以快速知道web项目使用什么框架,它就像一个面板,切入我们想用的插件. applicationContext.xml是spring的基本配置,主要配置数据源.JPA实体管理器工厂.事务 spring-mvc.xml是SpringMVC的配置, applicatio