Question

I have html page which containe dropdowns and submit button. Select a dropdown value and click on submit button How can i get dropdown value in javascript files custom service function in angularjs ? 

Here below is my html content:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E-cell</title>
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
    <script src="//code.angularjs.org/snapshot/angular-mocks.js"></script>
    <script src="e_cell_services.js"></script>
    <!--<script src="e_cell.js"></script>-->
    <!--<script src="e_cell_services.js"></script>-->
    <script src="e2e.js"></script>

    <script type="text/javascript">

        function selectvalue(){

            var country_dropdown=document.getElementById("country");
            var country_Mcode=document.getElementById("country_mcode");
            if(document.getElementById("country").value=="motoG")
            {
                document.getElementById("country_mcode").value="moto G"
            }
            if(document.getElementById("country").value=="samasung")
            {
                document.getElementById("country_mcode").value="Samsung"
            }
        }

        function selectvalue1(){

            var country_dropdown=document.getElementById("country");
            var country_Mcode=document.getElementById("country_mcode");
            if(document.getElementById("country").value=="20%")
            {
                document.getElementById("country_mcode").value="20%"
            }
            if(document.getElementById("country").value=="50%")
            {
                document.getElementById("country_mcode").value="50%"
            }
        }

        function selectvalue2(){

            var country_dropdown=document.getElementById("country");
            var country_Mcode=document.getElementById("country_mcode");
            if(document.getElementById("country").value=="p1")
            {
                document.getElementById("country_mcode").value="100 to 500"
            }
            if(document.getElementById("country").value=="p2")
            {
                document.getElementById("country_mcode").value="500 to 1000"
            }
        }


    </script>
</head>
<body>

<div ng-app="myEapp">
    <div ng-controller="myCtrl">
    <table border="1">
        <tr >
            <td>
                <div>
                    <h4>Details</h4>
                </div>
            </td>
            <td rowspan="4">
                <div>
                    <h4>Welcome</h4>
                </div>
                <div>
                    <p> manufacturing comprehensive assortment of
                        Electric Rickshaw, Battery Rickshaw, Electric
                        Passenger Rickshaw, Eco Friendly Rickshaw etc.,
                        We offer electric battery rickshaw which is
                        immensely appraised in the market for robust
                        construction, high performance, longer service
                        life, comfortable seats and low Maintenance.
                        These products are manufactured by using cutting edge technology and high grade components as per set Quality Standards.</p>
                </div>
            </td>
        </tr>
        <tr><td>
            <div>

                <select name="country_name" class="country" onchange="selectvalue2()" ng-model="price">
                    <option value="" selected >Price</option>
                    <option value="p1">100 to 500</option>
                    <option value="p2">500 to 1000</option>
                </select>

            </div>
        </td></tr>

        <tr><td>
            <div>

                <select name="country_name" class="country" onchange="selectvalue1()" ng-model="discount">
                    <option value="" selected >Discount</option>
                    <option value="20%">20%</option>
                    <option value="50%">50%</option>
                </select>

            </div>
        </td></tr>

        <tr><td>
            <div>

                <select name="country_name" class="country" onchange="selectvalue()" ng-model="mobile">
                    <option value="" selected >Smart Phone</option>
                    <option value="motoG">moto G</option>
                    <option value="samasung">Samsung</option>
                </select>

            </div>
        </td></tr>
        <tr><td><input type="submit" value="submit"  ng-click="fun()"></td></tr>
        <div ng-bind-html="ppl"></div>{{ppl}}

    </table>
    </div>
</div>
</body>
</html>


and my javascript file content is:

var product=angular.module('myApp',[]);


product.controller("myCtrl", function($scope,$http,$location,LSM){

    $scope.fun=function(){

        $http.post('#/product',{product:$scope.mobile ,price:$scope.price, discount:$scope.discount}).then (function(response){

            //product:$scope.mobile=[{one:'moto g',two:'samasung'}];
            //price:$scope.price=[{mini:100, max:500}];
            //discount:$scope.discount=[{mini:'20%', max:'50%'}];

            return $scope.ppl=response.data;
            // return $scope.ppl=$location.url();

        });


    }
});

product.service('LSM',function() {

        this.data=function(){
            return([{
                mobile:'moto g',
                price:'100 to 500',
                discount:'20% to 50%'
            }
            ])
        }

控制器中的错误传递值我也希望在服务中传递html值。以上你可以在product.services函数中看到错误的传递静态值，但我想在product.service函数中得到html页面下拉值，就像你可以看到的那样在product.controller（$ scope.mobile）上面..我该怎么做？

Answer 1

使用angularjs方式。试试如下。

＆＃13;

var app = angular.module('exApp', []);
  app.controller('controllerName', function($scope){
   //Here is selected price value is assign below scope variavle
   $scope.price = "";
  $scope.data = [{
                mobile:'moto g',
                price:'100 to 500',
                discount:'20% to 50%'
            },
             {
                mobile:'lenova',
                price:'100 to 500',
                discount:'20% to 50%'
            },
             {
                mobile:'samsung',
                price:'100 to 500',
                discount:'20% to 50%'
            }]
   $scope.selected = function(){
   console.log($scope.price);
   }
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body ng-app="exApp" ng-controller="controllerName">
<div>
 <select ng-model="price" ng-change="selected()" ng-options="mob.mobile for mob in data"></select>
    
     <br> {{price}}
 </div>
 </body>

＆＃13;

Answer 2

 Dropdown selection is use an ng-change event is get the your selected price value.

 Directive:  
 <div>
      <select name="country_name" class="country" on-change="selectvalue2()" ng-model="price">
      <option value="" selected >Price</option>
      <option value="p1">100 to 500</option>
      <option value="p2">500 to 1000</option>
      </select>
 </div> 
 Controller:
  app.controller('controllerName', function($scope){
   //Here is selected price value is assign below scope variavle
   $scope.price = "";
   $scope.selectValue2 = function(){
   alert($scope.price) 
   }
  })

演示网址：sample dropdown selection

如何在angularjs中获得自定义服务功能的下拉值？

2 个答案: