Question

我正试着在一本书的帮助下学习angularjs。我尝试执行一个关于如何在AngularJS中使用过滤器的示例，但它没有给出期望的结果。我不确定我错过了什么以及代码有什么问题。

以下是代码：

 <!DOCTYPE html>
    <html>
    <head>
    <title> Listing 4-4</title>
    <script src="js/angular.min.js"></script>
    <script>
        function myFilterDemo($scope){
            var someData = {
                    name: 'ashwini',
                    address: 'noida',
                    dateJoined: new Date(2015, 2, 14),
                    consumption:4567.12358,
                    plan: 'Super Basic Plan'
                };
                $scope.data = someData;
            }

    </script>
    </head>
    <body ng-controller ="myFilterDemo">
        <p> Consumption: {{data.consumption}}<br/>
        <p> Consumption: {{data.consumption | Number}}
    </body>
 </html>

Answer 1

如果您只是在过滤器上遇到问题，则使用数字过滤器，如下所示。 {{ number_expression | number : fractionSize}}

您的代码中还有其他问题。

检查此plnkr代码是否有效。

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script>
        var app = angular.module('myApp', []);
        function myFilterDemo($scope){
            var someData = {
                name: 'ashwini',
                address: 'noida',
                dateJoined: new Date(2015, 2, 14),
                consumption:4567.12358,
                plan: 'Super Basic Plan'
                };
                $scope.data = someData;
            }
        app.controller("myFilterDemo",myFilterDemo)
    </script>
    </head>
    <body ng-controller ="myFilterDemo">
    <p> Consumption: {{data.consumption}}<br/>
    <p> Consumption: {{data.consumption | number}}</p>
   </body>
   </html>

http://plnkr.co/edit/TjpZOiLWpga2DQiY5hpW?p=preview

Answer 2

ng-app arrtibute缺少添加

＆lt; body ng-app =＆＃34; yourapp＆＃34; ng-controller =＆＃34; myFilterDemo＆＃34;＆gt;

您还可以检查w3学校的过滤器 http://www.w3schools.com/angular/angular_filters.asp

angularjs过滤器样本的问题

2 个答案: