如何在AngularJS中运行多个连续的选择按钮 [英] How to run multiple successive select buttons in AngularJS

问题描述

我面对一个问题，在angularJS中有多个选择，其中每个都与前一个链接，并且取决于选择的先前项目的值可以通过角度轻松完成，但我很难想象如何使一个选择的索引传递到另一个选择，同时使其无响应，直到选择一些值为止。

我还创建了一个小提琴对于人们来说也是一样的。

以下是相关的HTML

 < div ng-app = 对myApp > 
< divng-controller =testController> 
< select ng-model =carBrandname =carBrandng-options =品牌品牌>< / select> 
< select ng-model =carModelname =carModelrequired ng-options =model.name for cars in cars [0]>< / select> 
<！ - 我想要汽车品牌（汽车[0]）在这里是动态的。在选择汽车品牌之前，应该将其预先清除黑色或不可编辑的内容，一旦选择了该品牌，所有与该品牌相关的型号只能显示在附加的选择按钮中。 
< / div> 
< / div> 
  

和一个示例app.js.在小提琴中找到完整的

  var app = angular.module（'myApp'，[]）; 
 app.controller（testController，function（$ scope）{
 $ scope.brands = ['Ford'，'Honda'，'Hyundai'，'Mahindra'，
'Maruti铃木'，'日产'，'雷诺'，'斯柯达'，'塔塔'，'丰田'，'大众'
]; 
 $ scope.carBrand = $ scope.brands [0]; 
 $ scope.cars = []; 
 / *这些汽车[0]和汽车[1]是静态声明的，但可以从REST API终端角度调用，为了简单起见，他们已经是现在。* / 
 $ scope.cars [0] = $ scope.cars [0] = [{
 name：Figo，
 capacity：45 
}，{ 
名称：Ecosport，
容量：52 
}，{
名称：Fiesta，
容量：45 
}，{
 name：Endeavour，
 capacity：71 
}]; 
}）; 
  

如何解决从一个选择获取索引并将其传递给另一个选项的问题这项工作，可能还有一个额外的好处是如果没有选择品牌，将无法反应。

解决方案

尝试 ng-change ：

 < select ng-model =carBrandname =carBrandrequired ng-options =品牌品牌
 ng-更改= selectedCar（carBrand） >< /选择> 
  

这将返回所选品牌的索引：

  $ scope.selectedCar = function（brand）{
 $ scope.carIndex = $ scope.brands.indexOf（brand）; 
}; 
  

将其与其他下拉列表一起使用：

 < select ng-model =carModelname =carModelrequired 
 ng-options =车型中的model.name [carIndex]>< ; /选择> 
  

工作小提琴

I facing an issue with having multiple selects in angularJS where each one of them is linked to the previous one and the value depended on the previous item selected which looks like could be done easily by angular but I am having a hard time figuring out how do I make the index of one select be passed to another select and at the same time making it unresponsive until some value is selected.

I also created a fiddle for the same for people to fiddle around with it.

Here is the concerned HTML

<div ng-app="myApp">
  <div ng-controller="testController">
    <select ng-model="carBrand" name="carBrand" required ng-options=" brand for brand in brands"></select>
    <select ng-model="carModel" name="carModel" required ng-options="model.name for model in cars[0]"></select>
    <!--I want the car brand(cars[0]) to be dynamic here. It should be prefreberably blacked out or uneditable until a Car brand is selected and once that particular brand is selected all the models pertaining to that brand only should be displayed in the ajoining select button-->
  </div>
</div>

and an example app.js. Find the complete one at the fiddle

var app = angular.module('myApp', []);
app.controller("testController", function($scope) {
  $scope.brands = ['Ford', 'Honda', 'Hyundai', 'Mahindra',
    'Maruti Suzuki', 'Nissan', 'Renault', 'Skoda', 'Tata', 'Toyota', 'Volksvagen'
  ];
  $scope.carBrand = $scope.brands[0];
  $scope.cars = [];
  /*These cars[0] and cars[1] are static declared but could well be called from a REST API endpoint in angular. For simplicity lets say they are already present. */
  $scope.cars[0] = $scope.cars[0] = [{
    name: "Figo",
    capacity: 45
  }, {
    name: "Ecosport",
    capacity: 52
  }, {
    name: "Fiesta",
    capacity: 45
  }, {
    name: "Endeavour",
    capacity: 71
  }];
});

How do I solve the issue of getting an index from one select and passing it to the other to make this work and probably an additional perk would be to make it unresponsive in case no brand is selected.

解决方案

Try ng-change:

<select ng-model="carBrand" name="carBrand" required ng-options=" brand for brand in brands" 
ng-change="selectedCar(carBrand)"></select>

This returns the index of the selected brand:

$scope.selectedCar = function(brand) {
  $scope.carIndex = $scope.brands.indexOf(brand);
};

Use it with the other dropdown as:

<select ng-model="carModel" name="carModel" required 
ng-options="model.name for model in cars[carIndex]"></select>

Working Fiddle

这篇关于如何在AngularJS中运行多个连续的选择按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！