加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 17:38:19 所属栏目:安全 来源:网络整理
导读:我正在使用 angularjs制作一个分页类型的东西,比如我有一个2D数组,我正在显示它的值.它的工作正常,但我也希望能够编辑thoes值,所以我在输入标签中使用ng-hide并且工作正常,但问题是如果输入的类型是数字或日期,我的数组值的类型是字符串然后值不会显示在可编
我正在使用 angularjs制作一个分页类型的东西,比如我有一个2D数组,我正在显示它的值.它的工作正常,但我也希望能够编辑thoes值,所以我在输入标签中使用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页面本身表达式中的数字或日期.任何线索!!

解决方法

这种方式使用指令自动将数字转换为字符串,反之亦然.我的意思是使用输入元素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.$格式化

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.$解析器

Array of functions to execute,whenever the control reads value from the DOM. Each function is called,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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读