display the selected item from drop-down box using angularjs

Question

car.html

    <body ng-app="carService" ng-controller="selectDropdown">
        <div>
            Car Brand:
            <select ng-model="userSelect">
                <option value="">--Select--</option>
                <option ng-repeat="ManufactureBrand in a" ng-bind="ManufactureBrand" 
                </option>
            </select>
            <input type="button" value="submit" ng-click="checkselection()">
            <span color:red>{{msg}}</span>
        </div>
    </body>

detail.js

var app=angular.module('carService',[]);

app.factory('Brandtest',function(){
    var brand={};
    brand.sample=['Bmw','Mercedes','Honda'];
    return brand;
});

app.controller('selectDropdown',['$scope','Brandtest',function($scope,Brandtest){
    $scope.a=Brandtest.sample;

   $scope.checkselection= function(){
        if($scope.userSelect !="" && $scope.userSelect !=undefined){
        $scope.msg = $scope.userSelect;

}
}
}]);

Hi, Im trying angularjs newly and Im having problem in displaying the selected item from a dropdown.Please help how to display the selected item from the drop-down box. Thanks in advance.

Darin Cardin · Accepted Answer · 2016-09-15 07:20:06Z

try this, using ng-options:

    <body ng-app="carService" ng-controller="selectDropdown">
            <div>
                Car Brand:
                <select ng-model="userSelect" ng-options=" item as item for item in a">
                    <option value="">--Select--</option>
                </select>
                <input type="button" value="submit" ng-click="checkselection()">
                <span color:red>{{msg}}</span>
            </div>
        </body>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

        <script>
            var app=angular.module('carService',[]);

            app.factory('Brandtest',function(){
                var brand={};
                brand.sample=['Bmw','Mercedes','Honda'];
                return brand;
            });

            app.controller('selectDropdown',['$scope','Brandtest',function($scope,Brandtest){
                $scope.a=Brandtest.sample;

               $scope.checkselection= function(){
                    if($scope.userSelect !="" && $scope.userSelect !=undefined){
                    $scope.msg = $scope.userSelect;


            }
            }
            }]);
        </script>

Sathish · Accepted Answer · 2016-09-15 07:19:36Z

0

Use value in option

 <option ng-repeat="ManufactureBrand in a" ng-bind="ManufactureBrand" value="{{ManufactureBrand}}" ></option>

Otherwise you were right

answered Sep 15, 2016 at 7:19

Sathish

3371 silver badge9 bronze badges

Comments

Mohit Tanwani · Accepted Answer · 2016-09-15 07:25:27Z

Check this snippet, made few changes in your code.

var app=angular.module('carService',[]);

app.factory('Brandtest',function(){
    var brand={};
    brand.sample=['Bmw','Mercedes','Honda'];
    return brand;
});

app.controller('selectDropdown',['$scope','Brandtest',function($scope,Brandtest){
    $scope.a=Brandtest.sample;
    $scope.checkselection= function(userSelect){
        if($scope.userSelect !="" && $scope.userSelect !=undefined){
        $scope.msg = $scope.userSelect;

}
}
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="carService" ng-controller="selectDropdown">
        <div>
            Car Brand:
            <select ng-model="userSelect">
                <option value="">--Select--</option>
                <option value="{{ManufactureBrand}}" ng-repeat="ManufactureBrand in a" ng-bind="ManufactureBrand">
                </option>
            </select>
            <input type="button" value="submit" ng-click="checkselection()">
            <span style="color:red">{{msg}}</span>
        </div>
    </body>

Collectives™ on Stack Overflow

display the selected item from drop-down box using angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related