javascript - 为什么使用表达式对变量进行 parseInt 不显示 $scope 变量?

标签 javascript html angularjs scope

这是我的代码,

工作代码

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 应该可以工作,这里有什么问题?

最佳答案

您必须解析 Controller 中的值,因为 Angular 无法将 parseInt 解析为 Angular 表达式:

另一方面,如果你真的想在 DOM 中实现这一点,最好的选择之一是使用 Angular 过滤器,例如:

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>

关于javascript - 为什么使用表达式对变量进行 parseInt 不显示 $scope 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41517371/

相关文章:

css - div 在移动布局中消失?

html - Bootstrap 水平表单元素有 -15px 边距

javascript - 格式化从 Laravel API 获取的 AngularJS ng-repeat 文本

javascript - 通过下拉选择禁用/启用输入字段 mvc 4

javascript - 在 Ckeditor 插件中获取输入的字母

javascript - 电子邮件模板的背景图像在 outlook 任何版本中均不起作用

javascript - 使用 Protractor 记录控制台错误

angularjs - Angular/karma : unknown provider

javascript - Pusher 不返回存在身份验证数据

javascript - ASP.NET MVC。检查用户是否获得 JavaScript 授权