Question

我在$scope.countries本地分配了国家/地区州城市值并将其传递给后端，现在在$ scope.getValue（）中我将从后端获取国家/地区州的值。但是我无法分配默认情况下，我从后端响应到我的ng-model $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":[]}}}

Answer 1

唐氏选民请先阅读以下所有评论的答案，我刚才从他指导他的要求中更新它。

我为你做了一个问题：请参考：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>

Answer 2

要为下拉默认值指定值，您需要将其指定给选择框的模态。

如果它不起作用，您需要迭代选择框下拉选项并与后端保存的国家/地区匹配。然后分配匹配的迭代选项以选择框模态。

默认情况下为下拉列表分配值

2 个答案: