Question

我的代码使用角度js时出现逻辑错误。我所做的是做一个循环通过json数组并返回天气条件的字符串的函数，例如 '明确'， '阴天'等... 然后检查字符串的值是否等于另一个字符串。如果是，则返回与天气状况相关联的图像链接。问题是html ng-repeat功能重复一个图像而不是任何其他图像。这是js：

    var app=angular.module('app');
    app.controller('MainCtrl', function($scope, $http) {
       $scope.currentSydney = null;
      $scope.currentMelbourne = null;
      $scope.currentAdelaide = null;
       $scope.currentDarwin = null;
        $scope.currentBrisbane = null;
          $scope.currentMelbourne = null;
            $scope.currentCairns = null;
        $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Melbourne.json?callback=JSON_CALLBACK').success(function(data){

         $scope.currentMelbourne=data;



      });
       $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Sydney.json?callback=JSON_CALLBACK').success(function(data){

         $scope.currentSydney=data;



      });

        $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Adelaide.json?callback=JSON_CALLBACK').success(function(data){

         $scope.currentAdelaide=data;



      });
        $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Darwin.json?callback=JSON_CALLBACK').success(function(data){

         $scope.currentDarwin=data;



      });

         $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Perth.json?callback=JSON_CALLBACK').success(function(data){

         $scope.currentPerth=data;



      });

        $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Cairns.json?callback=JSON_CALLBACK').success(function(data){

        $scope.currentCairns=data;



      });


      $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Brisbane.json?callback=JSON_CALLBACK').success(function(data){


         $scope.currentBrisbane=data;
         $scope.cityData=[
         {  name:'Brisbane',
            temp:$scope.currentBrisbane.current_observation.temp_c,  
            image:$scope.currentBrisbane.current_observation.icon
            },               

          { name:'Melbourne',
             temp:$scope.currentMelbourne.current_observation.temp_c,  
              image:$scope.currentMelbourne.current_observation.icon

            },

         { 
            name:'Adelaide',
            temp:$scope.currentAdelaide.current_observation.temp_c ,  
            image:$scope.currentAdelaide.current_observation.icon


          },

         {  name:'Darwin',
             temp:$scope.currentDarwin.current_observation.temp_c  ,
            image:$scope.currentDarwin.current_observation.icon


          },

         {  name:'Perth',
             temp:$scope.currentPerth.current_observation.temp_c  ,
             image:$scope.currentPerth.current_observation.icon

         },

         {  name:'Cairns',

            temp:$scope.currentCairns.current_observation.temp_c,  
            image:$scope.currentCairns.current_observation.icon

        },
         ]
     for(y = 0 ; y < 6; y++){


            var string = $scope.cityData[y].image;

            console.log(string[10]);
}

      });



      $scope.iconString = function() {
        switch ($scope.currentSydney.current_observation.icon) {
          case 'partlycloudy' :
            return 'pics/partlycloudy.png';
          case 'clear' :   
          return 'pics/partlycloudy.png';

        }
      }

      $scope.repeat = function() {

         for(y = 0 ; y < 1; y++){



            var string = $scope.cityData[y].image;

            if(string=='mostlycloudy'){
             return 'pics/mostlycloudy.png';

            } 


         }





        }









    });

这是html：

        <div id="weather-container">

        <div id="current-weather">
            <!--Angular JSON pull -->
            <div id="title"><span id="current-title">Current Weather</span></div>
            <div id="current-condition">{{currentSydney.current_observation.weather}}</div>

             <img ng-src="{{iconString()}}"></img>
            <div id="current-temp"><span id="current-temp"> {{currentSydney.current_observation.temp_c}} </span></div>
            <span id="current-city">{{currentSydney.current_observation.display_location.city}} </span>
        </div>






            <!--Angular JSON pull and iteration-->
        <div id="other-city-container">
            <div class="other-city-weather" ng-repeat="city in cityData" >
                <!--Image-->
             <img ng-src="{{repeat()}}"></img>
            <div class="current-city-temp">
                <span>{{city.temp}}</span>
            </div>
            <div class="current-city-lower">
                <span>{{city.name}}</span>
            </div>
            </div>


        </div>


    </div>

现在我在img src标签内的html中调用repeat函数。

`

Answer 1

我明白了。你正在制作2个循环：视图中的ng-repeat和控制器中的for循环（repeat（））。

但我认为现在，它们彼此无关（这就是我想要的）：在重复方法中获取ng-repeat循环的索引

尝试类似的东西：

在视图中：

<img ng-src="{{repeat($index)}}" />

在控制器中：

$scope.repeat = function(index) { // there, index becomes the value we just put in the view ($index = the current index of the ng-repeat loop), e.g. : 0,1,2,3... var string = $scope.cityData[index].image; // We go get the right city in the cityData array, according to the current ng-repeat index. // then we do the job if(string=='mostlycloudy'){ return 'pics/mostlycloudy.png'; } }

不确定是否有效，因为我没有测试它，但你可能知道我的意思吗？

角度js函数逻辑和重复错误

1 个答案: