获取一个select's值,并在angularJs中更改另一个select后将其更新为一个变量
Get a select's value and update it to a variable after changing another select in angularJs
当不同的选择值被改变时,我想获得一个选择的代码属性。下面是我使用的AngularJs代码:
<hr>
<div ng-controller="vrmsController" >
<!-- vrms input-->
<select ng-model='vrmsCode' ng:change='doChange()' ng-options="obj.code as obj.text for obj in {{vrms}}"></select>
<!--consumables-->
<select ng-show='showConsTypes' ng-model='midCode' ng-options="obj.code as obj.text for obj in {{consTypes}}"></select>
<!-- accessories -->
<select ng-show='showAccTypes' ng-model='midCode' ng-options="obj.code as obj.text for obj in {{accTypes}}" name='accTypes'></select>
<!-- blades -->
<select ng-show='showBladesTypes' ng-model='endCode' ng-options="obj.code as obj.text for obj in {{bladesTypes}}" name='accTypes'></select>
<!--the code -->
<hr>
<p><b>Code :</b> {{vrmsCode}}-{{midCode}}-{{endCode}}</p>
</div>
<!--The scripts-->
<script>
var app = angular.module("myapp", []);
//the vrms controller
app.controller("vrmsController", function($scope) {
//defaults and flags for the main VRMS controller
$scope.vrmsCode = '01';//consumables
$scope.midCode ='001';//blades
$scope.endCode ='001';//hack saw
//consumables
$scope.showConsTypes=true;
$scope.showBladesTypes=true;
$scope.showBoltsTypes=false;
//accessories
$scope.showAccTypes=false;
$scope.theFullCode = $scope.vrmsCode+'-'+$scope.midCode;
//switch
$scope.doChange=function(){
switch($scope.vrmsCode){
case '01':
$scope.showConsTypes=true;
$scope.showAccTypes=false;
$scope.showBladesTypes=true;
$scope.showBoltsTypes=false;
break;
case '02':
$scope.showConsTypes=false;
$scope.showAccTypes=true;
break;
}
}
//The data
$scope.vrms = [
{ "code":"01", "text": "01 - consumables" },
{ "code":"02", "text": "02 - accessories" }
];
$scope.consTypes = [
{ "code":"001", "text": "001 - blades" },
{ "code":"005", "text": "005 - bolts" }
];
$scope.bladesTypes = [
{ "code":"001", "text": "001 - hack saw" },
{ "code":"002", "text": "002 - blade file" }
];
$scope.boltsTypes = [
{ "code":"001", "text": "001 - bolt 1" },
{ "code":"002", "text": "002 - bolt 2" }
];
$scope.accTypes = [
{ "code":"001", "text": "001 - locks" },
{ "code":"002", "text": "002 - reflectors" }
];
});
</script>
如何改变midCode的值,当我改变第一个选择(model:midCode),因为在jQuery中它将是非常简单的,像这样:
var midCode;
$('someSelect').change(function(){
//get the value of the select you want and assign it to the midCode variable
var index = $('anotherSelect').val();
$('anotherSelect option').each(function(){
var selectval = $(this).val();
if(selectval==index){
midCode = $(this).attr('çode');
}
});
});
<hr>
您应该能够使用ng-change
。
<select ng-change="doStuff()" .... />
然后让控制器将doStuff
功能置于$scope
上。您可以通过更改ng-model
指向的变量来更改其他选择的值。
相关文章:
- 在php中请求一个select选项
- 更改下一个select元素的类名
- 在js函数调用中嵌入一个select值
- 如何使用angularjs来更改另一个select标记的值
- 你能用javascript设置一个select元素的defaultSelected值吗?
- 根据AngularJS中另一个select元素的值设置选择选项
- 需要一个select标签来跨文档运行javascript
- 使用javascript使用另一个SELECT多个值更新SELECT多个列表(使用erichynds multisele
- 至少选择了一个select-option的表单验证
- 从javascript while循环中创建一个select语句
- 如何使用angular数据绑定将一个复选框绑定到一个select disabled属性
- 如何将两个范围值相加,然后乘以一个select标记
- 如何将值从一个Select更改为另一个Select
- 可以'当第一个select的值改变时,让jquery设置select输入的值
- 在AngularJS中如何根据另一个Select的选择索引来改变一个Select标签的内容
- 如何使用javascript从一个select元素运行多个函数
- 在不使用Select属性的情况下选择一个Select选项(做一个假的鼠标点击)
- 当选择不同的选择选项时,更改另一个SELECT标记的值
- 获取一个select's值,并在angularJs中更改另一个select后将其更新为一个变量
- 动态创建一个select,然后更改ajax调用以附加html