javascript - ng-repeat 内的 ng-switch 不起作用

Question

我的数据基本上可以归结为:

function ExampleCtrl($scope) {
    $scope.myData= [
        {text: "blah", other: 3, V: 'caseOne'},
        {text: "blah", other: 3, V: 'caseTwo'},
        {text: "blah", other: 3, V: 'caseThree'}
    ];
}

这是这样使用的:

<div ng-controller="ExmapleCtrl">
    <table> 
       <tr> 
           <td>Text</td>
           <td>Other</td>
           <td>V</td>
       </tr>
       <tr ng-repeat="data in myData">
           <td><a href="#">{{data.text}}</a></td>
           <td>{{data.other}}</td>
           <td ng-switch on="data.V">
               <td ng-switch-when="caseOne"><img src="assets/img/pass.png"/></td>
               <td ng-switch-when="caseTwo"><img src="assets/img/pass.png"/></td>
               <td ng-switch-when="caseThree"><img src="assets/img/fail.png"/></td>
           </td>
    </table>
</div>

问题是我收到了这个错误:

Error: No controller: ngSwitch..

我显然已经将 Controller 设置为 ExampleCtrl，我没有看到任何输入错误，所以很遗憾我不知所措。

Answer 1

我认为这个问题与 ng-switch 产生无效标记有关。我不确定您是否可以将一个 td 嵌套在另一个 td 中。不管怎样，如果你把它改成这样它就会起作用:

 <td ng-switch on="data.V">
           <img src="assets/img/pass.png"  ng-switch-when="caseOne"/>
           <img src="assets/img/pass.png" ng-switch-when="caseTwo"/>
           <img ng-switch-when="caseThree" src="assets/img/fail.png"/>
       </td>

这是一个工作演示:http://plnkr.co/edit/zUdkJYfnlJul6HsyCGfZ

我将继续并建议一些不使用可能更好一点的开关的解决方案。查看最后两个 td 的

 <tr ng-repeat="data in myData">
           <td><a href="#">{{data.text}}</a></td>
           <td>{{data.other}}</td>

            <td>
               <img src='assets/img/{{data.V}}.png' />  <!-- assuming you have an image with name caseOne.png/caseTwo.png/etc -->
           </td>
           <td>
             <img src='{{passFail[data.V]}}' />   <!-- transform the case stuff to pass/fail based on some business rules, this is an object but could be a function-->
           </td>
      </tr>

$scope.passFail = {
  'caseOne' : 'assets/img/pass.png',
  'caseTwo' : 'assets/img/pass.png',
  'caseThree' : 'assets/img/fail.png'
};