Reputation: 697

Handling dropdown in angular js

I have a dropdown with some values :

Apple
Mango
Orange
Grapes

HTML :

<div class="form-group">
   <label class="control-label col-sm-20" for="groupz">Role*</label>
   <select class="form-control" ng-model="model.selectedRole" name="role" ng-change="GetRole(model.selectedRole)" >
      <option value class selected>Select Roles</option>
      <option ng-repeat="item in model.roles track by $index" value="{{item}}">{{item}}</option>
   </select>
</div>

I want my $scope.selectedRole to be by default as Apple. But later when the user needs to change the value, they can change it from apple to orange or any other fruit name. I have separate service request to fetch the fruits from backend and I write my code in controller as follows.

        $scope.GetRole = function() {

            $scope.selectedrole = [];
            if ($scope.model.selectedRole != null) {

                for (var i = 0; i < 1; i++) {
                    $scope.selectedrole.push($scope.model.selectedRole);
                }
            }
        }

Upvotes: 0

Answers (5)

Abdul Mateen Mohammed

Reputation: 1894

Handling a select element i.e. a drop down list in AngularJS is pretty simple.

Things you need to know is that you bind it to an array or a collection to generate the set of option tags using the ng-options or the ng-repeat directives which is bound to the data source on your $scope and you have a selected option which you need to retrieve as it is the one the user selects, it can be done using the ng-model directive.

If you want to set the selected option on the page load event, then you have to set the appropriate object or value (here it is the fruit id) which you are retrieving from data binding using the as clause in the ng-options directive as shown in the below embedded code snippet

ng-options="fruit.id as fruit.name for fruit in ctrl.fruits"

or set it to the value of the value attribute when using the ng-repeat directive on the option tag i.e. set data.model to the appropriate option.value

<select size="6" name="ngvalueselect" ng-model="data.model" multiple>
    <option ng-repeat="option in data.availableOptions" ng-value="option.value">{{option.name}}</option>
</select>

angular
  .module('fruits', [])
  .controller('FruitController', FruitController);
  
  function FruitController() {
    var vm = this;
    var fruitInfo = getFruits();
    vm.fruits = fruitInfo.fruits;
    vm.selectedFruitId = fruitInfo.selectedFruitId;
    vm.onFruitChanged = onFruitChanged;
    
    function getFruits() {
      // get fruits and selectedFruitId from api here
      var fruits = [
      	{ id: 1, name: 'Apple' },
      	{ id: 2, name: 'Mango' },
      	{ id: 3, name: 'Banana' },
      	{ id: 4, name: 'Orange' }
      ];
      
      var fruitInfo = {
      	fruits: fruits,
        selectedFruitId: 1
      };
      
      return fruitInfo;
    }
    
    function onFruitChanged(fruitId) {
      // do something when fruit changes
      console.log(fruitId);
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="fruits">
  <div ng-controller="FruitController as ctrl">
    <select ng-options="fruit.id as fruit.name for fruit in ctrl.fruits" 
            ng-model="ctrl.selectedFruitId"
            ng-change="ctrl.onFruitChanged(ctrl.selectedFruitId)">
      <option value="">Select Fruit</option>
    </select>
  </div>
</div>

Check the Example section here for more information.

Upvotes: 0

ciril sebastian

Reputation: 549

just try : HTML

<select class="form-control select" name="role" id="role" data-ng-model="ctrl.model.selectedRole" data-ng-options="option.name for option in ctrl.model.roles track by option.id"></select>

in your contoller

$scope.model = {
      roles: [{
        id: '1',
        name: 'Apple'
      }, {
        id: '2',
        name: 'Orange'
      }, {
        id: '3',
        name: 'Mango'
      }],
      selectedRole: {
        id: '1',
        name: 'Apple'
      } //This sets the default value of the select in the ui
    };

Upvotes: 1

mitra p

Reputation: 440

I hope this helps you

JsFiddle

In js

 angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {

 $scope.selectedrole  =  ['Apple', 'Mango', 'Orange', 'Grapes'];   
 $scope.selectRole= $scope.selectedrole[0];

  });

In HTML

<div ng-app="ExampleApp">
 <div ng-controller="ExampleController">
<select ng-model="selectRole" ng-options="role for role in selectedrole">
 </select>
 </div>

Upvotes: 1