Используйте ngOptions и / или ngRepeat во вложенном типе ввода. Выберите

0

Я пытаюсь создать select типа ввода, основанный на данных, захваченных из db/json file. Проблема, с которой я сталкиваюсь, заключается в том, что я могу Make часть выбора, но все остальные разделы не обновляются, когда я выбираю элемент.

Пожалуйста помогите.

Ниже приведен снимок экрана о том, чего я пытаюсь достичь:

Изображение 174551

Разметка 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"
  }
}
]
  • 0
    Какой параметр b вы передаете всем своим функциям контроллера?
  • 0
    Привет @MikeFeltman. Я ссылаюсь на b когда вы ng-repeat ng-repeat="b in cars" . Я не использую это здесь, потому что я не повторяю на входе, но на опции. Как вы думаете, я должен удалить его из моего кода?
Показать ещё 1 комментарий
Теги:
angularjs-ng-repeat
ng-options
html-select

4 ответа

0

Я сделал эту скрипку из вашего кода. Я использовал значения 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;
   }

 });
  • 0
    Спасибо за Ваш ответ. Это работает в определенной степени, но это только начало. моя конечная цель - создать объект, который выглядит следующим образом: 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>
  • 0
    jsfiddle.net/74uk5o2L посмотри на эту скрипку. Я изменил предыдущую скрипку. В конце, выбрав цвет, вы получите $ scope.car = {make: "CADILLAC", модель: "CTS", год: "2016", цвет: "черный"}
Показать ещё 1 комментарий
0

Вот полный модифицированный код для вашей проблемы без 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"}
        ]}
    }

];
});

Дайте мне знать, если с вышеуказанным кодом вы столкнулись с проблемой или нет

  • 0
    Привет, Танви. Спасибо за ваш ответ, но ваше предложение вынуждает меня изменить структуру данных, чего я не хочу делать. Я постараюсь адаптировать ваш код к моему проекту. Но я не уверен, что это сработает. Спасибо
  • 0
    Кажется, что ваша форма JSON неправильная, поэтому она не работает.
0

Пожалуйста, измените, как показано ниже:

     $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;
});
  • 0
    Я сделал изменения, которые вы предложили, но они все еще не работают для меня.
0

B, о котором вы говорите, должно быть внутри области $ scope, поэтому оно может быть правильно обновлено на html. Используйте $ scope.b insted из b, так же, как вы делали с $ scope.cars.

Если вам нужен более чистый код, удалите b и используйте $ scope.selectedModel вместо $ scope.b.selectedModel, а внутри ng-options выбранModel вместо b.selectedModel.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню