javascript - ng-switch inside ng-repeat not working -
i have data boils down this:
function examplectrl($scope) { $scope.mydata= [ {text: "blah", other: 3, v: 'caseone'}, {text: "blah", other: 3, v: 'casetwo'}, {text: "blah", other: 3, v: 'casethree'} ]; } this being used this:
<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> the problem is getting error:
error: no controller: ngswitch.. i have set controller examplectrl, don't see typing errors, @ loss unfortunately.
i believe issue has ng-switch producing invalid markup. i'm not sure can nest td inside td. anyways, if change work:
<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> here working demo: http://plnkr.co/edit/zudkjyfnljul6hsycgfz
i'll go ahead , suggest couple more solutions don't use switch might little nicer. check out last 2 td's
<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 have image name caseone.png/casetwo.png/etc --> </td> <td> <img src='{{passfail[data.v]}}' /> <!-- transform case stuff pass/fail based on business rules, object function--> </td> </tr> $scope.passfail = { 'caseone' : 'assets/img/pass.png', 'casetwo' : 'assets/img/pass.png', 'casethree' : 'assets/img/fail.png' };
Comments
Post a Comment