为什么使用表达式的变量上的 parseInt 不显示 $scope 变量？答案

【问题标题】：Why parseInt on a variable using expression does not display $scope variable?为什么使用表达式的变量上的 parseInt 不显示 $scope 变量？
【发布时间】：2017-01-07 03:01:10
【问题描述】：

这是我的代码，

工作代码

var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
  function($scope) {
         $scope.value = '20';
  }
]);

<!DOCTYPE html>
<html>
<head>
   <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
   <script src="script.js"></script>
</head>
<body ng-app='app'>
  <div ng-controller="ListCtrl">
   <h1> {{value}}</h1>
  </div>
</body>
</html>

代码无效：

var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
  function($scope) {
         $scope.value = '20';
  }
]);

<!DOCTYPE html>
<html>
<head>
   <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
   <script src="script.js"></script>
</head>
<body ng-app='app'>
  <div ng-controller="ListCtrl">
   <h1> {{parseInt(value)}}</h1>
  </div>
</body>
</html>

通常在表达式上使用 parseInt 应该可以，这里有什么问题？

【问题讨论】：

标签： javascript html angularjs scope

【解决方案1】：

您必须解析控制器中的值，因为 Angular 无法将 parseInt 转换为 Angular 表达式：

另一方面，如果您真的想在 DOM 中进行此操作，最好的选择之一是使用角度过滤器，例如：

var app = angular.module("app", []);

app.filter('parseInt', function() {
    return function(value) {
      return parseInt(value);
    };
});

app.controller("ListCtrl", ["$scope",
  function($scope) {
         $scope.value = '20';
  }
]);

<!DOCTYPE html>
<html>
<head>
   <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
   <script src="script.js"></script>
</head>
<body ng-app='app'>
  <div ng-controller="ListCtrl">
   <h1>{{(value | parseInt) + 44}}</h1>
  </div>
</body>
</html>

【讨论】：

【解决方案2】：

根据文档

https://docs.angularjs.org/guide/expression

Angular 不使用 JavaScript 的 eval() 来评估表达式。相反，Angular 的 $parse 服务会处理这些表达式。

关于为什么它不显示的问题，请检查这个

https://docs.angularjs.org/guide/interpolation

如果插值不是字符串，则计算如下：

undefined 和 null 被转换为 ''

由于 ParseInt 在插值中不可用，所以它是未定义的，显示的值也是如此。

您必须在控制器 $scope 中创建自己的函数。

var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",function($scope) {
  
         $scope.value = '20';
  
         $scope.parseInt = function(value)
         {
           return parseInt(value);
         }
         
      
         
  }
]);

<!DOCTYPE html>
<html>
<head>
   <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
   <script src="script.js"></script>
</head>
<body ng-app='app'>
  <div ng-controller="ListCtrl">
   <h1> {{parseInt(value)}}</h1>
  </div>
</body>
</html>

【讨论】：