ionic resim sözlüğü

   nedir resim sözlüğü?  ilgili alana kelimeler girdiinizde o kelimelrin karşiliği olan resmi getirmesi.ilk etapta yapay zeka akıllı öğrenmeyi çağrıştırsada biz en ilkel yolla yapmaya çalışsalım. akıllısını ileride vakit buldukça uğraşabiliriz.


bunu için resim ve isimleri ile ilgili json  listemiz ihtiyacımız var.

controllar.js içine ImageCont oluşturup içerisine listemizi oluşturalım:

      $scope.dicts=[{"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059061/oseyxqjbaodjgmu5k6p9.png"},"word":"gece"},
                    {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059067/tlkdgflzsr85sk617zz0.png"},"word":"çiçek"},
                   {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059070/pl5x22temtyijbkully1.png"},"word":"smile"},
                    {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059075/u4vqibpvkgrtmaxp1mcv.png"},"word":"köprü"},
                    {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059080/w12woyphq4knc25uamdi.png"},"word":"sehir"},
                    {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059083/nvt5zkfeessk4opn3xsi.png"},"word":"deniz"},
                    {"image":{"url":"http://res.cloudinary.com/dxwhd9s8o/image/upload/v1470059092/vxcdf4feurptlhsbqoez.png"},"word":"göl"}]


image.html kısmına input ve buton ekleyelim yazılan  kelimeleri almak için:


  <ion-item>
     <label class="item item-input"  >
       <input type="text" placeholder="isim giriniz." ng-model="$root.metin">
     
    </label>

  </ion-item>
   <ion-item>  <button class="button button-icon ion-plus" ng-click="texttoimage()"> Yazıyı Cevir
       </button> </ion-item>

controller.js den devam edelim:

     $scope.$root.cumle=[];
      $scope.$root.imagelist= [];

      $scope.texttoimage=function(){
          $scope.$root.cumle=[];
          $scope.$root.imagelist= [];
   
           $scope.cumle=$scope.$root.metin.trim().split(" ");

             $scope.cumle.forEach(function(data){
                 $scope.dicts.forEach(function(dist) {
                   if (dist.word==data) {
                     $scope.$root.imagelist.push(dist);
                     return  // break olarak kullanıldı
                    }
                })

           })       
    };


 $scope.isImageList = function() {

      if ($scope.$root.imagelist.length != 0)
        return true;
      else
        return false;

    };



imagelist nesnesinde yazdığımız isimlerin resim karşılığı sıralı olarak tutuluyor. Bunları ng-repeatle ekranda gösterelim:


image.html


 <div ng-show="isImageList()">
     <div ng-repeat="image in $root.imagelist" >
            <img src="{{ image.image.url }}"  height="150" width="150">
     </div> 
 </div>


Çalıştırıp bakalım:

 

Dierseniz bu resimleri sliderla arka arkaya göstererek gif etkisi yapabilirsiniz. bunun için bu yazıya gitmeniz gerekli :)