AngularJS-ng指令中的开关忽略数值_Angularjs_Angularjs Directive_Angularjs Scope_Angularjs Ng Repeat

AngularJS-ng指令中的开关忽略数值

angularjs

AngularJS-ng指令中的开关忽略数值,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,我有一组重复的ng switch语句，我正试图为这些语句创建一个指令 HTML: 谢谢plnkr：使用“按$index跟踪”，因为您有重复的元素 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script> <script>

我有一组重复的

ng switch

语句，我正试图为这些语句创建一个指令

HTML:

谢谢

plnkr：

使用“按$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>


angular.module（“ng”）.指令（'historyStatus'，函数（）{
返回{
限制：“A”，
替换：正确，
模板：“”+
“你”+
“D”+
'1' +
'2' +
'3' +
'4' +
'5' +
'6' +                            
“空”+
'' +
'',
范围：{
switchStatusHistory:“=statusHistory”
}
};
});

我会尝试使用

'U'

。也许这是一个典型的问题。@Sulthan-这几乎奏效了。。解决办法是删除“。。。所以，‘你’嗯，这很奇怪。。。

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

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", "1", "2", "U", "4", "1", "2", "A", "3", "D", "1", "", "", "", "", "", ""]

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