默认为下拉列表赋值

我在$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":[]}}}

Down的选民请先阅读下面的所有评论的答案，我刚刚从他的需求中更新它来指导他。

我做了一个活塞给你，请参考:这里

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>

要给下拉默认值赋值，你需要给选择框的模态赋值。

如果它不工作，你需要迭代选择框下拉选项和匹配您的后端保存的国家。然后分配匹配的迭代选项来选择box modal

相关内容

最新更新

热门标签：