angularjs開發學習常見問題總結

1.重新整理當前頁面資料：$state.reload

service.create(data).then(function (newItem) {
  flash.success = 'Successfully created something';
  service.fetchAll(var force = true).then(function (services) {
    $scope.services = services;
    $state.reload();
  });
});

2.新增儲存之後，停留在重新整理當前頁面，並且清空資料：$state.go(‘.’, {}, { reload: true });

WithdrawalsService.Create({
        withdrawals: $scope.userList,
        valueKeyList: $scope.arrayValueKey
    }).$promise.then(function (events) {
                msgBoxUtils.bigBox(events);
                //清空資料,重新整理頁面
                $state.go('.', {}, { reload: true });
                //儲存成功，並且列印
                Print(events);
        }, function (error) {
            msgBoxUtils.bigBox(error);
        });


3.延遲重新整理當前頁面：$timeout

service.create(data).then(function (newItem) {
  flash.success = 'Successfully created something';
  service.fetchAll(var force = true)
    .then(function (services) {
      $scope.services = services;
    }).then(function () {
      return $timeout(function () {
        $state.go('.', {}, { reload: true });
      }, 100);
    });
});





angularjs內建過濾器講解

在angular中內建了幾個常用的filter,可以簡化我們的操作。

過濾器使用 ‘|’ 符號，概念有點類似於linux中的管道。

1、filter （過濾）

filter可以根據條件過濾資料，例子：

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | filter:'coolcao'}}

結果：[{"name":"coolcao","age":23}]
這裡是過濾含有’coolcao’的對象，不論是哪個屬性中含有’coolcao’都可以。
如果要精確過濾，例如只要name為coolcao的可以使用如下：

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | filter:{'name':'coolcao'} }}

注意：filter 對象使用的大括弧和angularjs取值所用的大括弧之間要留至少一個空格（就是最後三個大括弧倒數第三個和倒數1，2兩個大括弧之前留至少一個空格，不然angularjs會解析錯誤）；

2、date : 日期格式化

在系統後台返回的資料中，時間欄位，我們可能使用的是時間戳記，Long型，在頁面顯示中肯定格式化為類似於‘2012-12-12 12:12:12’的字串，使用date過濾器即可

{{1423130269432 | date:'yyyy-MM-dd HH:mm:ss'}}

顯示結果：
2015-02-05 17:57:49
注意：Long型的時間戳記欄位是以毫秒為單位的，如果系統後台使用的是以秒為單位的，那麼在angular裡要乘以1000轉換為以毫秒為單位。這裡一定要分清到底是秒還是毫秒

3、number : 數字格式化

{{ 3.1415926 | number:1 }}
{{ 3.1415926 | number:2 }}
{{ -3.1415926 | number:2 }}
{{ 3 | number:2 }}
{{ 0.002 | number:2 }}
{{ 0.009 | number:2 }}
{{100 | number}}
{{1000 | number}}
{{1000 | number:2}}

結果：

3.1
3.14
-3.14
3.00
0.00
0.01
100
1,000
1,000.00

4、orderBy 排列

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age'}}

結果：

[{"name":"lily","age":20},{"name":"tom","age":22},{"name":"coolcao","age":23}]


預設是升序排列，如果要倒序：

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age':true}}

5、json格式化

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | json}}

結果：

[ { "name": "coolcao", "age": 23 }, { "name": "lily", "age": 22 }, { "name": "tom", "age": 22 } ]

注意：輸入是js的對象（非標準json），輸出的是標準的json字串（屬性名稱會用雙引號）

6、大小寫轉換： uppercase,lowercase

{{'abc' | uppercase}}

將輸出大寫的 ABC
注意：uppercase,lowercase只能對字串進行過濾轉換

7、currency : 貨幣的格式化
有時候我們需要把數字顯示為貨幣的形式方便展示，可以使用currency進行格式化

{{1000 | currency }}
{{1000 | currency:"RMB ￥" }}

顯示：

$1,000.00
RMB ￥1,000.00

8， //解析後台傳到前台
，換行問題 module 指令

 module.filter('trustHtml', function ($sce) {

        return function (input) {

            return $sce.trustAsHtml(input);

        }

    });

前台

<article id="word-display4" ng-bind-html="outsPrintDetailList.strRowAllMoney | trustHtml"></article>

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。