8

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

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

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

4

2 回答 2

4

我相信这个问题与ng-switch产生无效标记有关。我不确定您是否可以将 a 嵌套td在 anothertd中。无论如何，如果您将其更改为此它将起作用：

 <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'
};
于 2013-05-21T16:03:05.473 回答
1

上述答案的附加内容如果 td 内只有纯文本，例如切换用户角色或其他内容，您可以在 td 内添加一个 span 标签以包含文本

<td ng-switch="role">
   <span ng-switch-when="1">Administrator</span>
   <span ng-switch-when="2">Moderator</span>
</td>
于 2017-02-20T12:04:04.590 回答