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.phpAngularJS,”)
              .success(function (response) {$scope.names =
response.records;});
          })
      </script>

跨域HTTP请求
      假使您必要从不一样的服务器(不一致的域名)上获取数据就要求采用跨域HTTP请求。
      跨域请求在网页上分外广泛。很多网页从不相同服务器上载入CSS,图片,Js
脚本等。
      在现代浏览器中,为了多少的平安,所又哀求被严谨界定在同一域名下,要是急需调用不相同站点数据,必要经过跨域来化解。
      以下的PHP代码运行使用的网站开展跨域访问。
      header(“Access-Control-Allow-Origin: *”);

相关文章