zoukankan      html  css  js  c++  java
  • Angular js (2)

    AngularJS 过滤器及发送http请求

    1.currency,格式化数字为货币格式。

    2.filter,从数组项中选择一个子集。

    3.lowercase,格式化字符串为小写。

    4.orderBy,根据某个表达式排列数组。

    5.uppercase,格式化字符串为大写。

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

    <body>
        <div ng-app="myApp" ng-controller="myCon"> 
            <div>
            <input type="button" ng-click="postClick()"  value="post请求"/>
            <span>{{postBackMsg}}</span>
            <input type="button" value="get请求"  ng-click="getClick()"/>
            <span>{{getBackMsg}}</span>
            </div>
            <br />
            @*货币格式化*@
            <div>
                货币格式化  <input type="text" ng-model="price" />
                <span>{{price|currency}}</span>
            </div>
            @*转化为大写*@
            <div>
                转化为大写  <input type="text" ng-model="lastName" />
                <span>{{lastName|lowercase}}</span>
            </div>
            @*转化为小写*@
            <div>
                转化为小写  <input type="text" ng-model="lastName" />
                <span>{{lastName|uppercase}}</span>
            </div>
            @*数组过滤*@
            <div>
                数组过滤  <input type="text" ng-model="testfilter" />
                <ul>
                    <li ng-repeat="x in point|filter:testfilter|orderBy:'id'">
                        {{ x.id+","+x.name}}
                   </li>
                </ul>
            </div>
        </div>
    </body>
    <script>
        var myApp = angular.module("myApp", []);
        myApp.controller("myCon", function ($scope, $http) {
            $scope.price = "12.5";
            $scope.lastName = 'fxDXy';
            $scope.point = $scope.city =
                [
            { "id": "1", "name": "福建" },
            { "id": "2", "name": "广东" },
            { "id": "5", "name": "上海" },
            { "id": "4", "name": "北京" },
            { "id": "3", "name": "四川" }
            ];
            //发起请求
            $scope.postClick = function () {
                $http({
                    method: "post",
                    url: '/Shop/PostName?name=peter'
                }).then(function successCallback(response) {
                    $scope.postBackMsg = response.data;
                }, function errorCallback(response) {
                    $scope.getBackMsg = response.data;
                });
            }
        });
    </script>
  • 相关阅读:
    css: 组合选择器
    css: 基础选择器
    javascript设计模式:工厂模式
    wx: 小程序公共机制
    vue: 脚手架创建项目
    nodejs: express sequelize-cli
    css:flex和float margin布局
    自定义标签之inclusion_tag
    Django模型之Meta选项详解
    Django内置Admin
  • 原文地址:https://www.cnblogs.com/ypyhy/p/6742462.html
Copyright © 2011-2022 走看看