[angularjs教程]angularjs开发学习常见问题总结

更新时间:2019-12-02    来源:常见问题    手机版     字体:

【www.bbyears.com--常见问题】

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

        }

    });

前台



版权声明:本文为博主原创文章,未经博主允许不得转载。

本文来源:http://www.bbyears.com/jiaocheng/81840.html

热门标签

更多>>

本类排行