Search code examples
javascriptangularjslaravel-5.3ng-switchangularjs-ng-switch

Angular JS ng-switch not working


I am developing an application with Laravel and Angular JS. I am using [[ ]] for data binding.

On binding data in table with ng-switch is getting error and not working.

 <tr ng-repeat="category in categories">
            <td>[[category.Name]]</td>
            <td>[[category.ListOrder]]</td>
            <td ng-switch="category.Status">
              <img ng-switch-when="1" src="{{URL::asset('public/assets/images/icons/ic_active.png')}}"></td>
              <img ng-switch-when="0" src="{{URL::asset('public/assets/images/icons/ic_inactive.png')}}"></td>
            <td>
              <img src="{{URL::asset('public/assets/images/icons/ic_inactive.png')}}">
            </td>
            <td>[[category.updated_at]]</td>
</tr>

The response Status variable getting string values 1 and 0 when I check with Firebug.

How can I solve this....

I am using Angular JS v1.5.8

Error in Console..

 Error: [$compile:ctreq] http://errors.angularjs.org/1.5.8/$compile/ctreq?p0=ngSwitch&p1=ngSwitchWhenN/<@http://localhost/repos/p3-laravel/ppp_admin/public/js/angular.min.js:6:412

Solution

  • <td ng-switch="category.Status">
        <img ng-switch-when="1" ...></td>
        <img ng-switch-when="0" ...></td>
    

    You're prematurely closing closing the </td> after the first img, the second img is outside the <td> and thereby also outside the scope of ng-switch. The error is caused by ng-switch-when="0" not being able to find a parent ng-switch.