zoukankan      html  css  js  c++  java
  • AngularJS XMLHttpRequest

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

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible"content="IE=edeg" />
    <meta name="viewport"content="width=device-width,initial-scale=1" />
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />
    </head>
    <body>
    <div class="container">
    <div data-ng-app="myApp"data-ng-controller="customerCtrl">
    <input type="text"data-ng-model="test" />
    <ul>
    <li data-ng-repeat="x in customers | filter:test | orderBy:'Country'"> <!--filter过滤器用于从数组中选择一个子集-->
    {{x.Name+" "+x.City+" "+x.Country}}
    </li>
    </ul>

    </div>
    </div>
    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
    angular.module("myApp", []).controller("customerCtrl", function ($scope, $http) { $http.get("json/customerJson.json").success(function (response) { $scope.customers=response.records}) })
    </script>
    </body>
    </html>

    customerJson.json文件中的代码

    {
    "records":
    [
    {
    "Name" : "Alfreds Futterkiste",
    "City" : "Berlin",
    "Country" : "Germany"
    },
    {
    "Name" : "Berglunds snabbköp",
    "City" : "Luleå",
    "Country" : "Sweden"
    },
    {
    "Name" : "Centro comercial Moctezuma",
    "City" : "México D.F.",
    "Country" : "Mexico"
    },
    {
    "Name" : "Ernst Handel",
    "City" : "Graz",
    "Country" : "Austria"
    },
    {
    "Name" : "FISSA Fabrica Inter. Salchichas S.A.",
    "City" : "Madrid",
    "Country" : "Spain"
    },
    {
    "Name" : "Galería del gastrónomo",
    "City" : "Barcelona",
    "Country" : "Spain"
    },
    {
    "Name" : "Island Trading",
    "City" : "Cowes",
    "Country" : "UK"
    },
    {
    "Name" : "Königlich Essen",
    "City" : "Brandenburg",
    "Country" : "Germany"
    },
    {
    "Name" : "Laughing Bacchus Wine Cellars",
    "City" : "Vancouver",
    "Country" : "Canada"
    },
    {
    "Name" : "Magazzini Alimentari Riuniti",
    "City" : "Bergamo",
    "Country" : "Italy"
    },
    {
    "Name" : "North/South",
    "City" : "London",
    "Country" : "UK"
    },
    {
    "Name" : "Paris spécialités",
    "City" : "Paris",
    "Country" : "France"
    },
    {
    "Name" : "Rattlesnake Canyon Grocery",
    "City" : "Albuquerque",
    "Country" : "USA"
    },
    {
    "Name" : "Simons bistro",
    "City" : "København",
    "Country" : "Denmark"
    },
    {
    "Name" : "The Big Cheese",
    "City" : "Portland",
    "Country" : "USA"
    },
    {
    "Name" : "Vaffeljernet",
    "City" : "Århus",
    "Country" : "Denmark"
    },
    {
    "Name" : "Wolski Zajazd",
    "City" : "Warszawa",
    "Country" : "Poland"
    }
    ]
    }

  • 相关阅读:
    优秀JS学习站点
    一些比较好的论坛、博客
    最全前端问题及答案总结[转]
    EDM制作要点
    前端技术-调试工具(下)
    前端技术-调试工具(上)
    smartJQueryZoom(smartZoom) 的使用方法
    修改博客园日历的默认样式
    smartJQueryZoom(smartZoom) 存在的兼容性BUG,以及解决方法
    javascript实战 : 简单的颜色渐变
  • 原文地址:https://www.cnblogs.com/melao2006/p/5059653.html
Copyright © 2011-2022 走看看