zoukankan      html  css  js  c++  java
  • AngularJS学习笔记4

    9.AngularJS  XMLHttpRequest

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

    <div ng-app="myApp" ng-controller="customersCtrl"> 
    
    <ul>
      <li ng-repeat="x in names">
        {{ x.Name + ', ' + x.Country }}
      </li>
    </ul>
    
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("http://www.... ")
        .success(function(response) {$scope.names = response.records;});
    });
    </script>

    10.AngularJS  Select(选择框)

    在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,

    <div ng-app="myApp" ng-controller="myCtrl">
    
    <select 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>

    我们也可以使用ng-repeat 指令来创建下拉列表:

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

    ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但 ng-options 指令更适合创建下拉列表,它有以下优势:

    使用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。

    11.AngularJS  表格

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

    为了让页面更加美观,我们可以在页面中使用CSS:

    <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>

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

    <table>
      <tr ng-repeat="x in names">
        <td>{{ $index + 1 }}</td>
        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
      </tr>
    </table>
  • 相关阅读:
    文件下载的几种方式
    获取文件的后缀名(转为数组) 字符串和变量的拼接 HTML中字符串和变量的拼接
    小程序之选择拍照或者本地相册
    实时显示时间
    uni-app事件冒泡 如何解决事件冒泡 推荐tap事件
    Codeforces Global Round 7 C. Permutation Partitions(组合数学)
    Codeforces Global Round 7 B. Maximums(逻辑)
    Codeforces Global Round 7 A. Bad Ugly Numbers(数学)
    Codeforces Round #622 (Div. 2) C2. Skyscrapers (hard version)(单调栈,递推)
    Codeforces Round #622 (Div. 2) B. Different Rules(数学)
  • 原文地址:https://www.cnblogs.com/corolcorona/p/6707713.html
Copyright © 2011-2022 走看看