如何在angularjs表达式中将字符串转换为数字或日期 [英] How to convert string to number or date in angularjs expression

问题描述

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

代码:

<头><tr class="active"><th class="id">标签</th><th class="name">Field</th></tr></thead><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 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">关闭</div>
</td></tr></tbody>

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

解决方案

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

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

app.directive('numberConverter', function() {返回 {优先级:1，限制:'A'，要求:'ngModel'，链接:功能(范围，元素，属性，ngModel){函数模型(值){返回"+值；//转换为字符串}函数 toView(value) {返回 parseInt(value);//转换为数字}ngModel.$formatters.push(toView);ngModel.$parsers.push(toModel);}};});

HTML

更多信息:

ngModel.$formatters

<块引用>

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

ngModel.$parsers

<块引用>

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

PLUNKER

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

I am using angularjs to make a pagination type of thing, say I have a 2D array and I am displaying the values from it. Its working fine but I also want to be able to edit thoes values so I used ng-hide in input tag and its working fine but the problem is that if the type of input is number or date and the type of my array values is string then the values are not displayed in the editable input boxes.

Code:

<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>

The type is decided on the kind of data associated which is working but the binding is not proper so i need a way to convert string to number or date in the expression in html page itself. Any clue!!

解决方案

This way uses a directive to automagically converts numbers to string and viceversa. I mean using an input element type=number binded to a string variable.

This is done by using, $formatters and $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">

More Information:

ngModel.$formatters

Array of functions to execute, as a pipeline, whenever the model value changes. Each function is called, in turn, passing the value through to the next. Used to format / convert values for display in the control and validation.

ngModel.$parsers

Array of functions to execute, as a pipeline, whenever the control reads value from the DOM. Each function is called, in turn, passing the value through to the next. The last return value is used to populate the model. Used to sanitize / convert the value as well as validation. For validation, the parsers should update the validity state using $setValidity(), and return undefined for invalid values.

PLUNKER

Source Documentation: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

这篇关于如何在angularjs表达式中将字符串转换为数字或日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！