添加功能動態創建的圖像

我創建了一個簡單的搜索功能與AngularJS，它允許你從中國的生肖鍵入動物的名字，並獲得兼容的動物圖像。我想擴展這個應用程序，以便點擊其中一個動態創建的元素將帶出相關的動物列表。添加功能動態創建的圖像

我的第一個想法是在所有圖像元素上創建一個click事件監聽器，但這不適用於angular。我真的很感謝任何方向或幫助。

HTML

<div> 
What Animal Are You?<input type="text" ng-model="animal"><input type="submit" ng-click="submit(animal)"> 
</div>

JS：

$scope.submit = function(submitAnimal){ 
$scope.disappear=false 
$('.your-zodiac').empty() 
$('.mortalEnemy').empty() 
$('.friendsForever').empty() 

$http.get('zodiac.json') 
    .then(function(response) { 
       var animalsData = response.data.animals 
     function loopAnimals(arrayOfAnimals,element){ 
      for (var index in arrayOfAnimals){ 
       var animal = arrayOfAnimals[index] 
       for (var loopAnimal in animalsData){ 
        if(animalsData[loopAnimal].animal==animal){ 
         var picture = animalsData[loopAnimal].picture 
         $(element).prepend("<img src='"+ picture +"' alt='"+animal+"'/>") 
         break 
        } 
       } 
      } 
     } 
     for (var loopAnimal in animalsData){ 
      if (animalsData[loopAnimal].animal==submitAnimal){ //compatibility test 
       var picture = animalsData[loopAnimal].picture 
       $('.your-zodiac').prepend("<img src='"+ picture +"' alt='"+submitAnimal+"'/>") 
       var enemies = animalsData[loopAnimal].hate //hate array 
       var friends = animalsData[loopAnimal].love 
       loopAnimals(enemies,'.mortalEnemy') 
       loopAnimals(friends,'.friendsForever') 
       break; 
      } 
     } 

    });

Plunkr：http://plnkr.co/edit/9GtvFt5Kbvn1Sb98AXrA?p=preview

來源

2017-02-02 st4rgut

首先，也許在s中寫入你的代碼cript.js爲清晰起見，其次是所有jQuery的東西。 –

謝謝，接受你的建議，代碼更清潔 – st4rgut

我結束了使用jQuery的對動態圖像事件偵聽器：

$('#zodiac').on("click",'img',function(){ 
    var animal = $(this).attr('alt') 
    $scope.submit(animal) 
})

來源

2017-02-03 07:05:58 st4rgut

添加功能動態創建的圖像

回答

相關問題