你的位置:首页 > Java教程

[Java教程]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" >{{x.Name}}</td>
        <td ng-if="$even">{{x.Name}}</td>
        <td ng-if="$odd" >{{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: *");