2016-11-08 138 views
0

我已在$scope.countries中將當地的國家/地區城市值分配到$scope.countries,並將其傳遞到後端,現在位於$ scope.getValue()中我將從後端獲取國家/地區城市的值。但我是無法將默認情況下從後端響應中獲得的值分配給我的ng型號$scope.countrySrc默認分配下拉列表的值

<!DOCTYPE html> 
<html data-ng-app="myApp"> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body data-ng-controller="testController"> 



    <label for="country">Country *</label> 
    <select id="country" ng-model="countrySrc" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"> 
    <option value=''>Select</option> 
    </select> 
    <label for="state">State *</label> 
    <select id="state" ng-disabled="!countrySrc" ng-model="stateSrc" ng-options="state for (state,city) in countrySrc" ng-change="GetSelectedState()"> 
    <option value=''>Select</option> 
    </select> 
    <label for="city">City *</label> 
    <select id="city" ng-disabled="!countrySrc || !stateSrc" ng-model="city" ng-options="city for city in stateSrc"> 
    <option value=''>Select</option> 

    </select> 

    <script> 
    angular 
     .module('myApp', []) 
     .run(function($rootScope) { 
     $rootScope.title = 'myTest Page'; 
     }) 
     .controller('testController', ['$scope', 
     function($scope) { 


      $scope.countries = { 

      'USA': { 
       'Alabama': ['Montgomery', 'Birmingham'], 
       'California': ['Sacramento', 'Fremont'], 
       'Illinois': ['Springfield', 'Chicago'] 
      }, 
      'India': { 
       'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'], 
       'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'], 
       'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur'] 
      }, 
      'Australia': { 
       'New South Wales': ['Sydney'], 
       'Victoria': ['Melbourne'] 
      } 
      }; 

      $scope.GetSelectedCountry = function() { 
      $scope.strCountry = $scope.countrySrc; 
      }; 
      $scope.GetSelectedState = function() { 
      $scope.strState = $scope.stateSrc; 
      }; 
UserService.getProfile.then(function (response) { 


     $scope.strCountry = response.json.response.profile.country; 
     }; 


    $scope.getProfile(); 
     ]) 
    </script> 
</body> 

</html> 

Userservice.jS:從後端

function getProfile(profile){ 
     return $http.post(url+'?request=' + JSON.stringify(profile)).then(handleSuccess, handleError('Error in saving profile details')); 
    } 

響應:

 {"response":{"json":{"session_id":"498","profile": 
{"country":"Afghanistan", 
"state":"Badakhshan", 
"city":"Eshkashem", 
"pincode":"54564","rolemandatory":1},"roles":[]}}} 
+0

你的api電話在哪裏?你的問題中的「迴應」是什麼? – Sravan

+0

你在哪裏撥打該服務? – Sravan

+0

我在userservice.js –

回答

0

向下選民,請閱讀下面的所有評論回答第一個,我剛纔 更新從他的要求引導他。

我已經作出一個plunker爲您:請參考吧:Here

angular 
 
    .module('myApp', []) 
 
    .run(function($rootScope) { 
 
    $rootScope.title = 'myTest Page'; 
 
    }) 
 
    .controller('testController', ['$scope', 
 
    function($scope) { 
 

 

 
     $scope.countries = { 
 

 
     'USA': { 
 
      'Alabama': ['Montgomery', 'Birmingham'], 
 
      'California': ['Sacramento', 'Fremont'], 
 
      'Illinois': ['Springfield', 'Chicago'] 
 
     }, 
 
     'India': { 
 
      'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'], 
 
      'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'], 
 
      'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur'] 
 
     }, 
 
     'Australia': { 
 
      'New South Wales': ['Sydney'], 
 
      'Victoria': ['Melbourne'] 
 
     } 
 
     }; 
 

 
     $scope.GetSelectedCountry = function() { 
 
     $scope.strCountry = $scope.countrySrc; 
 
     }; 
 
     $scope.GetSelectedState = function() { 
 
     $scope.strState = $scope.stateSrc; 
 
     }; 
 

 
     $scope.getValues = function() { 
 
     $scope.strCountry = $scope.countrySrc; 
 
     }; 
 
     $scope.getValues(); 
 
    } 
 
    ]);
<!DOCTYPE html> 
 
<html data-ng-app="myApp"> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body data-ng-controller="testController"> 
 

 

 

 
    <label for="country">Country *</label> 
 
    <select id="country" ng-model="countrySrc" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"> 
 
    <option value=''>Select</option> 
 
    </select> 
 

 

 
    <label for="state">State *</label> 
 
    <select id="state" ng-disabled="!countrySrc" ng-model="stateSrc" ng-options="state for (state,city) in countrySrc" ng-change="GetSelectedState()"> 
 
    <option value=''>Select</option> 
 
    </select> 
 
    <label for="city">City *</label> 
 
    <select id="city" ng-disabled="!countrySrc || !stateSrc" ng-model="city" ng-options="city for city in stateSrc"> 
 
    <option value=''>Select</option> 
 

 
    </select> 
 

 
</body> 
 

 
</html>

+0

嗨,我明白你的意思,但我所說的問題是,本地我有這個國家的州城市,並將其保存到後端。從後端回來時,該值無法顯示在下拉ng模型中。 –

+0

讓我來更新我的答案 – Jigar7521

+0

立即檢查我已經爲此定義了承諾,而不是在工作條件下的適當直接,但是您可以在代碼中使用它。 – Jigar7521

0

要指定值下拉默認你需要給它分配給模態選擇框。

如果它不起作用,您需要迭代選擇框下拉選項並與您的後端保存國家相匹配。然後分配匹配的迭代選項來選擇框模式。