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

时间:2014-05-20 06:31:10

标签: javascript jquery angularjs

我希望在更改不同的选择值时获取select的code属性。以下是我正在使用的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)时,如何更改中间代码的值,因为在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>

1 个答案:

答案 0 :(得分:0)

您应该可以使用ng-change

<select ng-change="doStuff()" .... />

然后让控制器将doStuff功能放在$scope上。您可以通过更改其ng-model指向的变量来更改其他选择的值。