Question

我正在尝试根据从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"
  }
}
]

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;
   }

 });

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

4 个答案: