获取一个select's值,并在angularJs中更改另一个select后将其更新为一个变量

Get a select's value and update it to a variable after changing another select in angularJs

本文关键字:一个 select 另一个 变量 更新 angularJs 并在 获取      更新时间:2023-09-26

当不同的选择值被改变时,我想获得一个选择的代码属性。下面是我使用的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指向的变量来更改其他选择的值。