Angularjs用json对象数组串级下拉
Angularjs cascade dropdown with json object array
我想了解控制器是如何在angularjs中使用级联下拉菜单的。但是我的第二个下拉框没有根据前一个下拉框的值填充。
我的JSON数组结果:
[{
"id": "23031",
"fabricante": "ALFA ROMEO",
"modelo": "33",
"motor": "1.3 '/ 1.3 ie",
"combustivel": "Gasolina '/ GNV",
"ano_vela": "",
"ngk": "",
"ngk_green": "BPR6EY",
"gap": "0,7",
"ano_cabo": "",
"cabos_ngk": "",
"inicio": "",
"fim": "",
"seguimento": "4 RODAS",
"ano_bobina": "",
"bobina_ngk": "",
"pais": "Argentina",
"n_processo": "0"
}, {
"id": "23057",
"fabricante": "ARO",
"modelo": "Serie 10",
"motor": "1.4",
"combustivel": "Gasolina '/ GNV",
"ano_vela": "",
"ngk": "BP6HS",
"ngk_green": "",
"gap": "0,7",
"ano_cabo": "",
"cabos_ngk": "",
"inicio": "",
"fim": "",
"seguimento": "4 RODAS",
"ano_bobina": "",
"bobina_ngk": "",
"pais": "Argentina",
"n_processo": "0"
}]
My Controller EDITED:
angular.module('starter.controllers', [])
.controller('fabricanteController', ['$scope','$http', function($scope, $http) {
$http.get('JSON_PATH').success(function (data) {
$scope.fabricantes = data;
$scope.$watch('fabricante', function(newVal) {
if (newVal) $scope.modelo = data;
console.log($scope.modelo);
});
});
}]);
我的HTML:
<label class="item item-input item-select">
<div class="input-label">
Fabricante
</div>
<select ng-model="fabricante" ng-options="fab.fabricante for fab in fabricantes track by fab.fabricante">
<option value="" disabled="disabled">Selecionar</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
Modelo
</div>
<select ng-model="modelo" ng-options="mod.modelo for mod in fabricantes">
<option value="" disabled="disabled">Selecionar</option>
</select>
</label>
试着四处看看如何让它工作,但没有运气。知道为什么吗?
如果您想显示所选'fabricante'
对象的'modelo'
属性,您必须将第二个DDL的ng-option
指向新的$scope
数组变量,例如:
$scope.modelos = [{"modelo": newVal.modelo}];
你的ng-options应该是:
<select ng-model="test" ng-options="mod.modelo for mod in modelos">
这是一个工作的JSFiddle
你的手表没有触发,因为你传入了一个字符串,而不是一个变量。另外,我不知道你在哪里检查newVal,但它不会像那样工作。
基本实现:
$scope.$watch($scope.fabricante, function() {
$scope.modelo = data;
console.log($scope.modelo);
});
带newVal检查:
$scope.$watch($scope.fabricante, function() {
if($scope.modelo!=data)
{
$scope.modelo = data;
console.log($scope.modelo);
}
});
你也可以在选择框中使用ng-change,它将在任何更改时触发。
<select ng-model="fabricante" ng-change="doSomething()" ng-options="fab.id for fab in fabricantes"></select>
相关文章:
- 为DataTables aoColumnDefs创建JavaScript数组(JSON格式)
- 使用 Javascript 将行添加到数组 json
- PHP数组JSON编码和该对象在ExtJs中解码
- 数组json转换为数组json
- 将Blob文本转换为Javascript中的数组/JSON对象
- 如何合并这些数组/json 对象
- 尝试从数组 JSON 键中删除引号
- JavaScript 中的数组 JSON
- 在数组 JSON 格式的 JavaScript 变量末尾添加新地址
- 如何访问这个Javascript数组(JSON对象?)
- rails传递记录数组(JSON)
- 按值提取对象/数组json vs数组
- 获取具有子数组json值的数组的值
- Object对象数组Json.字符串数组的字符串化
- 如何在Ext js 4.1中过滤数组json
- PHP -多维数组Json
- 正在分析数组Json以选择Tag
- 试图将字符串数据转换为数值数据,将数据放入数组的数组(Json)
- 从数组json、javascript中的specf值中删除引号
- 使用JavaScript或jQuery读取数组JSON