Question

我正在使用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页面本身的表达式中的数字或日期。任何线索!! enter image description here

Answer 1

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

这是通过使用$ 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">

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

1 个答案:

更多信息：