Question

我有一个小应用程序，我在列表中添加城市和国家/地区，并使用http请求请求个别城市的天气。

问题是什么 ：当我在列表中有多个城市时，我要求特定城市的天气，它会更新列表中所有城市的天气;

我想要什么？：我想创建一个动态变量或数组索引，我可以存储和显示各个城市的天气信息，其名称为索引。除动态变量或数组索引外，我对其他解决方案持开放态度。

是否有plnkr？：这是指向plunkr的链接。添加2个条目以重现该问题 1）浦那，印度 2）孟买，印度

我尝试了什么：我尝试将“destination”变量转换为字符串，这是使用 $ parse 和 $ scope的字符串函数参数。$ eval （）但是没有用。

这是我的getWeather功能

$scope.getWeather = function(destination){

    $http.get(destination+".json").then(
        function successCallback (response){
            if(response.data){
                $scope.dest = {};
                $scope.dest = response.data;                

                // $scope.info[$parse(destination)] = response.data;
                // console.log($scope.info[$parse(destination)]);

            }
        },
        function errorCallback (err){
            alert(err);
        }
    );
}

Answer 1

每个目标对象/模型也应该拥有自己的weather属性。获得该目的地的天气后，将weather属性设置为数据。

// Code goes here
var testingAngluarApp = angular.module('myapp', []);

testingAngluarApp.controller('mycontroller', function ($scope, $http) {
    $scope.title = "Testing AngularJS Applications";

    $scope.destinations = [];
    $scope.info = [];
    // Destination Class/Model
    var NewDestination = function(){
      this.city = '';
      this.country = '';
      this.weather = null;
    }
    $scope.newDestination = new NewDestination();
    $scope.addDestination = function(){
        $scope.destinations.push($scope.newDestination);
        $scope.newDestination = new NewDestination();
    };

    $scope.removeDestinations = function($index){
        $scope.destinations.splice($index,1);
    };
    // Pass in the reference to the destination object
    $scope.getWeather = function(destination){
        $http.get(destination.city+".json").then(
            function successCallback (response){
                if(response.data){
                    // Set the detination's weather to the response's data
                    destination.weather = response.data;
                                           
                }
            },
            function errorCallback (err){
                alert(err);
            }
        );
    }
});

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
    <body ng-controller="mycontroller">
        <h3>{{title}}</h3>
        <section>
            <form ng-submit="addDestination()">
                <input type="text" name="city" ng-model="newDestination.city" ng-init="newDestination.city='pune'" value="" />
                <input type="text" name="country" ng-model="newDestination.country"  ng-init="newDestination.country='India'" value="">
                <button type="submin">Add</button>
            </form>
        </section>
        <h4>Your Wishlist</h4>
        <section>
        <!-- Update the template to reference the destination's weather property -->
            <div ng-repeat="destination in destinations">{{ destination.city }}, {{ destination.country }} 
                <span ng-if="destination.weather"> - {{ destination.weather.weather }}, {{ destination.weather.temp }} </span>
                <button ng-click="removeDestinations($index)">Remove</button>
                <!-- Pass the destination object to the getWeather function instead of just the city name-->
                <button ng-click="getWeather(destination)">Weather</button>
            </div>
        </section>
    </body>
</html>

Answer 2

所以这是一个答案：

http://plnkr.co/edit/iL3RRc8NdOS5OSrfyG8o?p=preview

User{"Steven", -45.3m}

基本上，我认为你在使用$ scope.dest或索引等方面有点复杂。只是把数据放在目的地上对我来说很有用。

如何创建动态变量和分配数据

2 个答案: