[英]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>
更改第一个选择(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
指向的变量来更改其他选择的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.