繁体   English   中英

在更改angularJs中的另一个选择后,获取选择的值并将其更新为变量

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM