Я пытаюсь создать select
типа ввода, основанный на данных, захваченных из db/json file
. Проблема, с которой я сталкиваюсь, заключается в том, что я могу Make
часть выбора, но все остальные разделы не обновляются, когда я выбираю элемент.
Пожалуйста помогите.
Ниже приведен снимок экрана о том, чего я пытаюсь достичь:
Разметка HTML:
<select required ng-change="onCarChange(b,car)" ng-model="reportData.car.make" ng-options="bb.make for bb in cars" class="form-control" >
<option value="">--Select--</option>
</select>
<select required ng-model="reportData.car.model" ng-change="onModelChange(b,model)" ng-options="cha.model.name for cha in b.selectedModels" class="form-control" >
<option value="">--Select--</option>
</select>
<select required ng-model="reportData.car.year" ng-change="onYearChange(b,year)" ng-options="t for t in b.selectedYears" class="form-control" >
<option value="">--Select--</option>
</select>
<select required ng-model="reportData.car.color" ng-change="onColorChange(b,color)" ng-options="t for t in b.selectedColors" class="form-control" >
<option value="">--Select--</option>
</select>
Контроллер APP.JS
$scope.onCarChange=function(b,car){
b.selectedModels=car.model;
}
$scope.onModelChange=function(b,model){
b.selectedModel=model;
b.selectedYears=model.years;
}
$scope.onYearChange=function(b,year){
b.selectedYear=year;
b.selectedColor=years.colors;
}
$scope.onColorChange=function(b,color){
b.selectedColor=color;
}
Пример данных
$scope.cars = [
{
"model": [
{
"year": [
"2016",
"2015",
"2014"
],
"name": "CTS",
"color": [
{"id":1, "hexvalue":"#000", "description":"Black"},
{"id":2, "hexvalue":"#fff", "description":"White"},
{"id":3, "hexvalue":"#FAF0BE", "description":"Blonde"},
{"id":4, "hexvalue":"#0000FF", "description":"Blue"},
{"id":5, "hexvalue":"#808080", "description":"Grey"}
],
"id": 0
},
{
"year": [
"2016",
"2015",
"2014",
"2013",
"2012"
],
"name": "ATS",
"color": [
{"id":1, "hexvalue":"#000", "description":"Black"},
{"id":2, "hexvalue":"#fff", "description":"White"},
{"id":3, "hexvalue":"#FAF0BE", "description":"Blonde"},
{"id":4, "hexvalue":"#0000FF", "description":"Blue"},
{"id":5, "hexvalue":"#808080", "description":"Grey"}
],
"id": 1
},
{
"year": [
"2016",
"2015",
"2014"
],
"name": "XTS",
"color": [
{"id":1, "hexvalue":"#000", "description":"Black"},
{"id":2, "hexvalue":"#fff", "description":"White"},
{"id":3, "hexvalue":"#FAF0BE", "description":"Blonde"},
{"id":4, "hexvalue":"#0000FF", "description":"Blue"}
],
"id": 2
}
],
"make": "CADILLAC",
"picture": "http://placehold.it/32x32",
"index": 0,
"_id": "573bef46573891a64081d4d6"
}
}
]
Я сделал эту скрипку из вашего кода. Я использовал значения ng-model в качестве параметров.
проверьте эту скрипту: https://jsfiddle.net/vh16yx5s/
Код HTML
<div ng-app='test'>
<div ng-controller="testCtrl">
<select required ng-change="onCarChange(reportData.car)" ng-model="reportData.car" ng-options="bb.make for bb in cars" class="form-control">
<option value="">--Select--</option>
</select>
<select required ng-model="reportData.car.model" ng-change="onModelChange(reportData.car.model)" ng-options="cha.name for cha in b.selectedModels" class="form-control">
<option value="">--Select--</option>
</select>
<select required ng-model="reportData.car.year" ng-change="onYearChange(b,year)" ng-options="t for t in b.selectedYears" class="form-control">
<option value="">--Select--</option>
</select>
<select required ng-model="reportData.car.color" ng-change="onColorChange(b,color)" ng-options="t.description for t in b.selectedColors" class="form-control">
<option value="">--Select--</option>
</select>
</div>
</div>
Код AngularJS
var test = angular.module('test', []);
test.controller('testCtrl', function testCtrl($scope) {
console.log('initiated');
$scope.cars = [{
"model": [{
"year": ["2016","2015","2014"],
"name": "CTS",
"color": [{"id": 1, "hexvalue": "#000", "description": "Black" },
{"id": 2, "hexvalue": "#fff", "description": "White" },
{"id": 3, "hexvalue": "#FAF0BE", "description": "Blonde"},
{"id": 4, "hexvalue": "#0000FF", "description": "Blue"},
{"id": 5, "hexvalue": "#808080", "description": "Grey"}],
"id": 0
}, {
"year": [
"2016",
"2015",
"2014",
"2013",
"2012"
],
"name": "ATS",
"color": [{
"id": 1,
"hexvalue": "#000",
"description": "Black"
}, {
"id": 2,
"hexvalue": "#fff",
"description": "White"
}, {
"id": 3,
"hexvalue": "#FAF0BE",
"description": "Blonde"
}, {
"id": 4,
"hexvalue": "#0000FF",
"description": "Blue"
}, {
"id": 5,
"hexvalue": "#808080",
"description": "Grey"
}],
"id": 1
}, {
"year": [
"2016",
"2015",
"2014"
],
"name": "XTS",
"color": [{
"id": 1,
"hexvalue": "#000",
"description": "Black"
}, {
"id": 2,
"hexvalue": "#fff",
"description": "White"
}, {
"id": 3,
"hexvalue": "#FAF0BE",
"description": "Blonde"
}, {
"id": 4,
"hexvalue": "#0000FF",
"description": "Blue"
}],
"id": 2
}],
"make": "CADILLAC",
"picture": "http://placehold.it/32x32",
"index": 0,
"_id": "573bef46573891a64081d4d6"
}
];
$scope.b = {};
$scope.onCarChange = function(car) {
console.log(car);
$scope.b.selectedModels = car.model;
}
$scope.onModelChange = function(model) {
console.log(model);
$scope.b.selectedModel = model;
$scope.b.selectedYears = model.year;
$scope.b.selectedColors = model.color;
}
$scope.onYearChange = function(b, year) {
$scope.b.selectedYear = year;
$scope.b.selectedColor = years.colors;
}
$scope.onColorChange = function(b, color) {
$scope.b.selectedColor = color;
}
});
car:{ make:Cadillac, Model: CTS, Year: 2012, Color: Blue }
Я изменил ваш код, чтобы получить желаемый результат, но он не работает. Можете ли вы помочь мне понять это тоже? Изменено select
для Make <select required ng-change="onCarChange(reportData.car.make)" ng-model="reportData.car.make" ng-options="bb.make for bb in cars" class="form-control"> <option value="">--Select--</option> </select>
Вот полный модифицированный код для вашей проблемы без ng-change:
Код HTML:
<div ng-app="myapp">
<fieldset ng-controller="myCtrl">
<select required ng-model="reportData.car.make" ng-options="item for item in c" class="form-control" >
<option value="">--Select--</option>
</select>
<select required ng-model="selectedmodel" ng-options="source.name for source in sourceList" class="form-control" >
<option value="">--Select--</option>
</select>
<select required ng-model="selectedYear" ng-options="item for item in selectedmodel.suboptions.yearList" class="form-control" >
<option value="">--Select--</option>
</select>
<select required ng-model="selectedColor" ng-options="t.description for t in selectedmodel.suboptions.color" class="form-control" >
<option value="">--Select--</option>
</select>
</fieldset>
</div>
Код JS:
var myapp = angular.module('myapp', []);
myapp.controller('myCtrl', function ($scope) {
$scope.c =['CADILLAC','CAR2'];
$scope.models =['CTS','ATS'];
$scope.sourceList = [
{
name: "CTS",
suboptions:
{ "yearList": [
"2016",
"2015",
"2014"
],
"color": [
{"id":1, "hexvalue":"#000", "description":"Black"},
{"id":2, "hexvalue":"#fff", "description":"White"},
{"id":3, "hexvalue":"#FAF0BE", "description":"Blonde"},
{"id":4, "hexvalue":"#0000FF", "description":"Blue"},
{"id":5, "hexvalue":"#808080", "description":"Grey"}
]}
},
{
name: "ATS",
suboptions:
{ "yearList": [
"2016",
"2015",
"2014"
],
"color": [
{"id":1, "hexvalue":"#000", "description":"Black"},
{"id":2, "hexvalue":"#fff", "description":"White"},
{"id":3, "hexvalue":"#FAF0BE", "description":"Blonde"},
{"id":4, "hexvalue":"#0000FF", "description":"Blue"},
{"id":5, "hexvalue":"#808080", "description":"Grey"}
]}
}
];
});
Дайте мне знать, если с вышеуказанным кодом вы столкнулись с проблемой или нет
Пожалуйста, измените, как показано ниже:
$scope.onCarChange=function(b,car){
$scope.b.selectedModels=car.model;
}
$scope.onModelChange=function(b,model){
$scope.b.selectedModel=model;
$scope.b.selectedYears=model.years;
}
$scope.onYearChange=function(b,year){
$scope.b.selectedYear=year;
$scope.b.selectedColor=years.colors;
}
$scope.onColorChange=function(b,color){
$scope.b.selectedColor=color;
}
Также одно предложение, вам не нужно называть ng-change, чтобы отразить то же самое. Рассмотрим ниже пример
Код HTML: сначала: {{firstSelection}} second: {{secondSelection}}
Код Js:
var myapp = angular.module('myapp', []);
myapp.controller('myCtrl', function ($scope) {
$scope.a = [1,2,3];
$scope.b = {
1:[1,2],
2:[2,4],
3:[3,6]
};
$scope.firstSelection = 2;
$scope.secondSelection = 4;
});
B, о котором вы говорите, должно быть внутри области $ scope, поэтому оно может быть правильно обновлено на html. Используйте $ scope.b insted из b, так же, как вы делали с $ scope.cars.
Если вам нужен более чистый код, удалите b и используйте $ scope.selectedModel вместо $ scope.b.selectedModel, а внутри ng-options выбранModel вместо b.selectedModel.
b
когда вы ng-repeatng-repeat="b in cars"
. Я не использую это здесь, потому что я не повторяю на входе, но на опции. Как вы думаете, я должен удалить его из моего кода?