如何在angularjs表达式中将字符串转换为数字或日期

Question

我正在使用 angularjs 来制作分页类型的东西，比如说我有一个 2D 数组，我正在显示其中的值。它工作正常，但我也希望能够编辑这些值，所以我在输入标签中使用了 ng-hide，它工作正常，但问题是，如果输入的类型是数字或日期，我的数组值的类型是字符串那么这些值不会显示在可编辑的输入框中。

代码：

<table class="table table-hover">
            <thead>
                <tr class="active">
                    <th class="id">Label</th>
                    <th class="name">Field</th>
                </tr>
            </thead>

            <tbody>
                <tr ng-repeat="item in fieldsonPage[currentPage]" class="active">
                    <td>{{item}}</td>
                    <td>
                        <div ng-repeat="prop in pagedItems[currentPage]" class="active">
                                <div ng-hide="ngEditName" ng-click="ngEditName=!ngEditName">
                                    {{prop[item]}}
                                </div>
                                <div ng-show="ngEditName">                                                    
                                    <input type="{{fieldsType[item]}}" ng-hide="{{fieldsType[item] == 'textarea' ? 'true' : 'false'}}" ng-model="prop[item]" class="form-control"/>
                                    <textarea rows="4" cols="50" ng-hide="{{fieldsType[item] == 'textarea' ? 'false' : 'true'}}" class="form-control" ng-model="prop[item]" /><div ng-click="ngEditName=!ngEditName">Close</div> 
                                </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

类型取决于正在工作的相关数据类型，但绑定不正确，因此我需要一种方法来将字符串转换为 html 页面表达式中的数字或日期。任何线索！

Answer 1

这种方式使用指令自动将数字转换为字符串，反之亦然。我的意思是使用绑定到string 变量的input 元素type=number。

这是通过使用 $formatters 和 $parsers 来完成的。

app.directive('numberConverter', function() {
  return {
    priority: 1,
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      function toModel(value) {
        return "" + value; // convert to string
      }

      function toView(value) {
        return parseInt(value); // convert to number
      }

      ngModel.$formatters.push(toView);
      ngModel.$parsers.push(toModel);
    }
  };
});

HTML

 <input type="number" number-converter ng-model="model.number">

更多信息：

ngModel.$formatters

每当模型值发生变化时，作为管道执行的函数数组。依次调用每个函数，将值传递给下一个函数。用于格式化/转换值以在控件中显示和验证。

ngModel.$parsers

每当控件从 DOM 读取值时，作为管道执行的函数数组。依次调用每个函数，将值传递给下一个函数。最后一个返回值用于填充模型。用于清理/转换值以及验证。对于验证，解析器应该使用 $setValidity() 更新有效性状态，并为无效值返回 undefined。

PLUNKER

源文档：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController