在我的选择中显示默认的选择在角度JS

您好我正在使用AngularJS我正在开发一个简单的应用程序，我有一些数据在我的JSON。在我的选择中显示默认的选择在角度JS

data.json：

[{ 
     "name": "city A", 
     "elements": [{ 
      "id": "c01", 
      "name": "name1", 
      "price": "15", 
      "qte": "10" 
     }, { 
      "id": "c02", 
      "name": "name2', 
      "price": "18, 
      "qte": "11" 
     }, { 
      "id": "c03", 
      "name": "name3", 
      "price": "11", 
      "qte": "14" 
     }], 
     "subsities": [{ 
      "name": "sub A1", 
      "elements": [{ 
      "id": "sub01", 
      "name": "nameSub1", 
      "price": "1", 
      "qte": "14" 
      }, { 
      "id": "sub02", 
      "name": "nameSub2", 
      "price": "8", 
      "qte": "13" 
      }, { 
      "id": "sub03", 
      "name": "nameSub3", 
      "price": "1", 
      "qte": "14" 
      }] 
     }, { 
      "name": "sub A2", 
      "elements": [{ 
      "id": "ssub01", 
      "name": "nameSsub1", 
      "price": "1", 
      "qte": "7" 
      }, { 
      "id": "ssub02", 
      "name": "nameSsub2", 
      "price": "8", 
      "qte": "1" 
      }, { 
      "id": "ssub03", 
      "name": "nameSsub3", 
      "price": "4", 
      "qte": "19" 
      }] 
     }, { 
      "name": "sub A3", 
      "elements": [{ 
      "id": "sssub01", 
      "name": "nameSssub1", 
      "price": "1", 
      "qte": "11" 
      }, { 
      "id": "sssub02", 
      "name": "nameSssub2", 
      "price": "2", 
      "qte": "15" 
      }, { 
      "id": "sssub03", 
      "name": "nameSssub3", 
      "price": "1", 
      "qte": "15" 
      }] 
     }] 
     }, { 
     "name": "city B", 
     "elements": [{ 
      "id": "cc01", 
      "name": "name11", 
      "price": "10", 
      "qte": "11" 
     }, { 
      "id": "cc02", 
      "name": "name22", 
      "price": "14", 
      "qte": "19" 
     }, { 
      "id": "cc03", 
      "name": "name33", 
      "price": "11", 
      "qte": "18" 
     }] 
     }, { 
     "name": "city C", 
     "elements": [{ 
      "id": "ccc01", 
      "name": "name111", 
      "price": "19", 
      "qte": "12" 
     }, { 
      "id": "ccc02", 
      "name": "name222", 
      "price": "18", 
      "qte": "17" 
     }, { 
      "id": "ccc03", 
      "name": "name333", 
      "price": "10", 
      "qte": "5" 
     }] 
     }];

这里我打电话给我的数据。

angular.module('app', []).controller('MainController', ['$scope', '$http', function($scope, $http) { 
    $http.get('js/controllers/data.json').then(function(response) { 
      $scope.cities = response.data; 
    }); 
    $scope.extractSubsities = function(itemSelected) { 
    if (itemSelected && itemSelected.elements) { 
     $scope.data = itemSelected.elements; 
    } 
    } 
}]);

我想展现一个城市的价值在我选择一个默认选择。

的index.html

<body ng-controller="MainCtrl"> 
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)"> 
    </select> 

     <select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name"> 
     <option style="" value=""></option> 
     </select> 

     <table> 
     <tr ng-repeat="item3 in data track by item3.id"> 
      <td>{{ item3.id }}</td> 
      <td>{{ item3.name }}</td> 
      <td>{{ item3.price }}</td> 
     </tr> 
     </table> 

    </body> 

    </html>

我需要表现出城A作为默认选定值我怎么能解决这个问题吗？

来源

2016-05-13 Abderrahim

的[如何使用NG-选项来设置选择元素的默认值]（HTTP可能重复：// stackoverflow.com/questions/17329495/how-to-use-ng-option-to-set-default-value-of-select-element） – chresse

@chresse抱歉不是同一个问题 – Abderrahim

尝试更新控制器为：

angular.module('app', []).controller('MainController', ['$scope', '$http',function($scope, $http) { 
$http.get('js/controllers/data.json').then(function(response) { 
     $scope.cities = response.data; 
     $scope.selectedCity = $scope.cities[0]; 
     $scope.data = $scope.selectedCity.elements; 
}); 
$scope.extractSubsities = function(itemSelected) { 
    if (itemSelected && itemSelected.elements) { 
    $scope.data = itemSelected.elements; 
    } 
} 
}]);

来源

2016-05-13 14:46:53 Elka

但我无法加载在我的表格中选择的这个选择的数据 – Abderrahim

请参阅我的编辑并尝试像这样 – Elka

非常感谢您的帮助 – Abderrahim

你只需要传递一个参考ngModel。 $scope.selectedCity = data[0];

angular 
 
    .module('test', []) 
 
    .value('data', [ 
 
    "Rome", "Bologna", "New York", "London", "Paris" 
 
    ]) 
 
    .controller('TestCtrl', function TestCtrl($scope, data) { 
 
    $scope.items = data; 
 
    $scope.val = $scope.items[1]; 
 
    }) 
 
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<section ng-app="test"> 
 
    <article ng-controller="TestCtrl"> 
 
    <select ng-model="val" ng-options="item for item in items"></select> 
 
    </article> 
 
</section>

来源

2016-05-13 14:36:18 Hitmands

我加了这个$ scope.selectedCity = data [0];在我的脚本上，但不适用于我。你能告诉我如何请！ – Abderrahim

在我的选择中显示默认的选择在角度JS

回答

相关问题