Question

我有一组重复的ng-switch语句，我正在尝试为。

创建一个指令

HTML：

<td ng-repeat="status in myStatus">
    <span ng-switch="status">
        <span ng-switch-when="0"></span>
        <span ng-switch-when="U">U</span>
        <span ng-switch-when="D">D</span>
        <span ng-switch-when="1">1</span>
        <span ng-switch-when="2">2</span>
        <span ng-switch-when="3">3</span>
        <span ng-switch-when="4">4</span>
        <span ng-switch-when="5">5</span>
        <span ng-switch-when="6">6</span>
        <span ng-switch-default></span>
    </span>
</td>

以上在我的HTML中工作正常，但通过以下方式移动到指令时

<span history-status status-history='statusHistory'></span>

JS：

app.directive('historyStatus', function () {
return {
    restrict: 'A',
    replace: true,
    template:   '<span ng-switch="switchStatusHistory">' +
                    '<span ng-switch-when="U">U</span>' +
                    '<span ng-switch-when="D">D</span>' +
                    '<span ng-switch-when="1">1</span>' +
                    '<span ng-switch-when="2">2</span>' +
                    '<span ng-switch-when="3">3</span>' +
                    '<span ng-switch-when="4">4</span>' +
                    '<span ng-switch-when="5">5</span>' +
                    '<span ng-switch-when="6">6</span>' +                            
                    '<span ng-switch-when="null">null</span>' +
                    '<span ng-switch-default></span>' +
                '</span>',
    scope: {
        switchStatusHistory: '=statusHistory'
    }
};

}）;

只输出字符串值，因此输出D和U ...整数被忽略。

我的JSON看起来如下：

["D", "1", "2", "U", "4", "1", "2", "A", "3", "D", "1", "", "", "", "", "", ""]

由于

Answer 1

plunker：http://plnkr.co/edit/9DWrEicfeSAnHYV3IaP0?p=preview

使用“跟踪$ index”，因为你有重复的元素

<!DOCTYPE html>
<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script>
      angular.module("ng").directive('historyStatus', function () {
          return {
              restrict: 'A',
              replace: true,
              template:   '<span ng-switch on="switchStatusHistory">' +
                              '<span ng-switch-when="U">U</span>' +
                              '<span ng-switch-when="D">D</span>' +
                              '<span ng-switch-when="1">1</span>' +
                              '<span ng-switch-when="2">2</span>' +
                              '<span ng-switch-when="3">3</span>' +
                              '<span ng-switch-when="4">4</span>' +
                              '<span ng-switch-when="5">5</span>' +
                              '<span ng-switch-when="6">6</span>' +                            
                              '<span ng-switch-when="null">null</span>' +
                              '<span ng-switch-default></span>' +
                          '</span>',
              scope: {
                  switchStatusHistory: '=statusHistory'
              }
          };
        });
    </script>
  </head>

  <body ng-app>
    <div ng-init='myStatus=["D", "1", "2", "U", "4", "1", "2", "A", "3", "D", "1", "", "", "", "", "", ""]'></div>
    <div ng-repeat="status in myStatus track by $index">
      <span history-status status-history='status'></span>
    </div>

  </body>

AngularJS - 指令中的ng-switch忽略数值

1 个答案: