Angularjs中的自定义过滤器不起作用

Posted 2023-03-05

【中文标题】Angularjs中的自定义过滤器不起作用

【英文标题】：Custom filter in Angularjs not working

【发布时间】：2017-07-25 21:15:45

【问题描述】：

我正在尝试在 Angularjs 中实现自定义过滤器。但我不明白这有什么问题。没有得到预期的输出。这是我的代码：

script.js

var myApp = angular.module('myModule', []);
myApp.filter("gender", function()
  return function(gender)
    switch(gender)
      case 1 : return 'Male';
      case 2 : return 'Female';
    
  
);

myApp.controller('myController', function($scope)
var employees = [
     name : 'Raghu', gender : '1', salary : 84000.779 ,
     name : 'Anil', gender : '1', salary : 78000 ,
     name : 'Ramya', gender : '2', salary : 118000 ,
     name : 'Shwetha', gender : '2', salary : 68000 ,
     name : 'Chethan', gender : '1', salary : 168000 
];
$scope.employees = employees;

);

page.html

<div class="container" ng-controller="myController">
        <h1>Angular Example Ten</h1>
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees">
                    <td> employee.name </td>
                    <td> employee.gender | gender </td>
                    <td> employee.salary </td>
                </tr>
            </tbody>
        </table>
    </div>

【问题讨论】：

控制台有错误吗？

如果你能提到你得到的输出，那会很有帮助。

没有错误，性别栏为空..

【参考方案1】：

将数字大小写更改为字符串值：

switch(gender)     
    case '1' : return 'Male';
    case '2' : return 'Female';
default: return 'Male';

您应该将其转换为字符串并且还具有默认结果。

AngularJS Filter

【参考方案2】：

您传递的数字是字符串而不是整数。将 switch 案例编号更改为字符串

switch(gender)
      case "1" : return 'Male';
      case "2" : return 'Female';
    

var myApp = angular.module('myModule', []);
myApp.filter("gender", function()
  return function(gender)
  debugger
    switch(gender)
      case "1" : return 'Male';
      case "2" : return 'Female';
    
  
);

myApp.controller('myController', function($scope)
var employees = [
     name : 'Raghu', gender : '1', salary : 84000.779 ,
     name : 'Anil', gender : '1', salary : 78000 ,
     name : 'Ramya', gender : '2', salary : 118000 ,
     name : 'Shwetha', gender : '2', salary : 68000 ,
     name : 'Chethan', gender : '1', salary : 168000 
];
$scope.employees = employees;
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myModule" ng-controller="myController">
        <h1>Angular Example Ten</h1>
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees">
                    <td> employee.name </td>
                    <td> employee.gender | gender </td>
                    <td> employee.salary </td>
                </tr>
            </tbody>
        </table>
    </div>

【参考方案3】：

将数字大小写更改为字符串值：

case '1' : return 'Male';
case '2' : return 'Female';

因为1 !== "1"。

console.log('1 !== "1" ::::', 1 !== "1"); // true