Question

下午好，

我正在尝试根据数据结构中的格式动态地为字段分配格式;我的模板太通用了，无法定义已经指定的格式类型，甚至是类型。即我在实际数据的范围内定义了一个属性，并在格式的范围内定义了一个属性。

E.g。 $ scope.data ='123.456'和$ scope.format ='number：2'应显示'123.45' 要么 $ scope.data ='2013-12-10 23:59:00'和$ scope.format ='date：yyyy-MM-hh'应显示'2013-12-10'。

我可以像 {{data |数字：}} ，但我不能做* {{data | }}

我创建了一个非常基本的JSFiddle

function TodoCtrl($scope) {
  $scope.data = '1234567';
  $scope.format = 'number:2';
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="TodoCtrl">
  
  <p>
    Data = <input type="text" ng-model="data" />
  </p>
  
  <p>
    Format = <input type="text" ng-model="format" />
  </p>
  
  <br />
  
  <p>
    Unformatted data = {{data}}
  </p>
  
  <p>
    Formatted data = <!--{{data | format}}-->
  </p>
</div>

有什么想法吗？

Answer 1

在这种情况下，我不确定它在HTML中的可能性，我认为您需要创建自己的过滤器/功能，接受2并取消结果，可能是$compile或{{3} } [not $ eval btw]（通过链接提供简单示例）

Answer 2

试试这个。

function TodoCtrl($scope, $filter) {
  $scope.data = '1234567';
  $scope.format = 'number';
  $scope.formatExp = '2';
  $scope.getFormattedContent = function() {
      return $filter($scope.format)($scope.data, $scope.formatExp);
  };
}

HTML：

<div ng-app ng-controller="TodoCtrl">
  <p>
    Data = <input type="text" ng-model="data" />
  </p>
  <p>
    Format = <input type="text" ng-model="format" />
  </p>
  <p>
    FormatExp = <input type="text" ng-model="formatExp" />
  </p>
  <br />
  <p>
    Unformatted data = {{data}}
  </p>
  <p>
    Formatted data = {{getFormattedContent()}}
  </p>
</div>

Answer 3

您可以编写一个接受配置对象的自定义过滤器，并根据解析配置对象返回您需要的任何格式。

这可以很容易地扩展到在服务中存储各种配置，因此控制器只需要注入服务并传递服务配置对象来查看或注入服务到过滤器中以访问配置对象等

var app = angular.module('plunker', []);

app.filter('dynamicFilter', function($filter) {
  return function(input, config) {

    if (!config) return input;

    switch (config.type) {
      // date and number use same setup - $filter with one argument
      case 'date':
      case 'number':
        return $filter(config.type)(input, config.arg);
        break;

      case 'pseudo-filter':
        // do something else to input
        return input

      default: // no match for config.type
        return input
    }
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.myDate = new Date();
  $scope.myNumber = 22.555567;
  $scope.filters = {
    number: {
      type: 'number',
      arg: 2
    },
    date: {
      type: 'date',
      arg: "MM/dd/yyyy 'at' h:mma"
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<div ng-app="plunker" ng-controller="MainCtrl">

  <p>myDate: {{myDate | dynamicFilter:filters.date}}</p>

  <p>myNumber: {{myNumber | dynamicFilter:filters.number}}</p>

</div>

Answer 4

从许多答案（特别是bresleveloper，charlietfl和NiK648）中汲取灵感，我提出了最终解决方案......

这基本上使用了建议的方法，但使用更多过滤器类型更加通用......

JSFiddle示例

＆＃13;

var siteApp = angular.module('SiteApp', []);

siteApp.controller('TodoCtrl', function TodoCtrl($scope) {
  $scope.data = '1234.567';
  $scope.format = 'number:2';
});


siteApp.filter('DynamicFilter', ['$filter', function ($filter) {
    return function (input, fmt) {
        if (fmt === undefined || fmt === null) {
            return input;
        }
        else {
            var tokens = fmt.split(':');

            if (tokens.length === 1) {
                return $filter(tokens[0])(input);
            }
            else if (tokens.length === 2) {
                return $filter(tokens[0])(input, tokens[1]);
            }
            else {
                console.error('Unsupported number of arguments in DynamicFilter [' + tokens.length + '].');
            }
        }
    };
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="SiteApp" ng-controller="TodoCtrl">
  
  <p>
    Data = <input type="text" ng-model="data" />
  </p>
  
  <p>
    Format = <input type="text" ng-model="format" />
  </p>
  
  <br />
  
  <p>
    Unformatted data = {{data}}
  </p>
  
  <p>
    Formatted data = {{data | DynamicFilter:format}}
  </p>
</div>

＆＃13;

谢谢大家的帮助，非常感谢。

格式类型的绑定

4 个答案: