ionic ng-if不适用于$ index作为模板视图中范围的索引

Question

i have an issue with ng-if i have the next code :

 <ion-slide-box ng-if="sencillo.length && sencillo[$index].custom_sound_path" on-slide-changed="slideHasChanged(sencillo[$index].custom_sound_path)" class="fondo-rojo" show-pager="false" does-continue="true"> <ion-slide on-swipe-right="setR({{sencillo}},$index)" on-swipe-left="setL({{sencillo}},$index)" ng-repeat="senci in sencillo" repeat-done="repeatDone()"> <h1 class="margen-slide slide-estilo">{{senci.title}}</h1> <div style="margin: 0 auto; width:70px" > <a ng-click="play(senci.custom_sound_path)"><img ng-src="img/sonidos/play.png" width="70px" height="70px"></a> <!--<button ng-click="nextSlide()"> >> </button>--> </div> </ion-slide> </ion-slide-box> <ion-slide-box ng-if="sencillo.length && !sencillo[$index].custom_sound_path" on-slide-changed="slideHasChanged('/android_asset/www/raw/'+sencillo[$index].sound_title+'.mp3')" class="fondo-rojo" show-pager="false" does-continue="true"> <ion-slide on-swipe-right="setR({{sencillo}},$index)" on-swipe-left="setL({{sencillo}},$index)" ng-repeat="senci in sencillo" repeat-done="repeatDone()"> <h1 class="margen-slide slide-estilo">{{senci.title}}</h1> <div style="margin: 0 auto; width:70px" > <a ng-click="play('/android_asset/www/raw/'+senci.sound_title+'.mp3')"><img ng-src="img/sonidos/play.png" width="70px" height="70px"></a> <!--<button ng-click="nextSlide()"> >> </button>--> </div> </ion-slide> </ion-slide-box> 

I 'm trying to evaluate if sencillo[$index].custom_sound_path exists , then run the first slidebox else run the second slidebox. The problem is the ng-if always detect sencillo[$index].custom_sound_path as a null value so always the second slidebox is executed, however in another view this works fine, like this:

 <div ng-if="editsimpleRow.custom_sound_path"> <a ng-click="play(editsimpleRow.custom_sound_path)"><img ng-src="img/sonidos/play.png" width="40px" height="40px"></a> <!--<a ng-click="play(editsimple.custom_sound_path)"><img ng-src="img/sonidos/play.png" width="40px" height="40px"></a>--> </div> <div ng-if="!editsimpleRow.custom_sound_path"> <a ng-click="play('/android_asset/www/raw/'+editsimpleRow.sound_title+'.mp3')"><img ng-src="img/sonidos/play.png" width="40px" height="40px"></a> </div> 

i just see the $index value as the only difference, i will appreciate any help!!, thanks, sorry for my english.

Answer 1

I found a solution, i changed my view for :

 <ion-slide-box ng-if="sencillo.length" on-slide-changed="slideHasChanged('/android_asset/www/raw/'+sencillo[$index].sound_title+'.mp3',sencillo[$index].custom_sound_path)" class="fondo-rojo" show-pager="false" does-continue="true"> <ion-slide on-swipe-right="setR({{sencillo}},$index)" on-swipe-left="setL({{sencillo}},$index)" ng-repeat="senci in sencillo" repeat-done="repeatDone()"> <h1 class="margen-slide slide-estilo">{{senci.title}}</h1> <div style="margin: 0 auto; width:70px" > <a ng-click="slideHasChanged('/android_asset/www/raw/'+sencillo[$index].sound_title+'.mp3',sencillo[$index].custom_sound_path)"><img ng-src="img/sonidos/play.png" width="70px" height="70px"></a> <!--<button ng-click="nextSlide()"> >> </button>--> </div> </ion-slide> </ion-slide-box> 

Then i put the if in my controller, like this:

 $scope.slideHasChanged = function(src,srcdos){ if (srcdos == null){ $scope.play(src); }else { $scope.play(srcdos); } } 

note that the function slideHasChanged now get two parameters instead one.