在嵌套输入类型 Select 中使用 ngOptions 和/或 ngRepeat

Question

我正在尝试根据从db/json file 抓取的数据创建一个输入类型select。 我遇到的问题是我可以选择 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"
  }
}
]

Answer 1

您所指的 b 应该在 $scope 内，以便它可以在 html 上正确更新。使用 $scope.b insted of b，就像使用 $scope.cars 一样。

如果您想要更简洁的代码，请删除 b 并使用 $scope.selectedModel 代替 $scope.b.selectedModel，并在 ng-options selectedModel 中代替 b.selectedModel。

Answer 2

请修改如下：

     $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 }} 第二：{{ 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;
});

Answer 3

这是针对您的问题的完整修改代码，无需 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"}
        ]}
    }

];
});

如果使用上述代码，请告诉我您是否也遇到问题

Answer 4

我用你的代码做了这个小提琴。我使用 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;
   }

 });