AngularJSAngularjs基础(五)

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: *”);

相关文章