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>

 

posted @ 2017-04-21 10:52  努力的小样  阅读(146)  评论(0)    收藏  举报
Copyright ©2017 爱睡觉的程序猿