angularjs select nth child in ng option

Question

I use this Jquery to select nth child

<select class="perf-select">
    <option selected>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

jquery

jQuery('.perf-select>option:eq(2)').prop('selected', true);

How i achive this in angularjs ng-option

<select class="perf-select" ng-model="viewProfileCtrl.graphsForm.institution"
                        ng-options="inst.institution.institution_id as inst.institution.name for inst in viewProfileCtrl.perfiosAnalysisData.institutions"
                        ng-change="viewProfileCtrl.setGraphInsti(viewProfileCtrl.graphsForm.institution)">
                        <option value=""  selected>Select a Bank </option>
                     </select>

Possible duplicate of [how to use ng-option to set default value of select element](http://stackoverflow.com/questions/17329495/how-to-use-ng-option-to-set-default-value-of-select-element) — Samir Aguiar, Mar 15 '17 at 16:43
Do you have to select the Nth child or just know the value for default? — Jeb50, Mar 15 '17 at 16:50

score 0 · Answer 1 · answered Mar 15 '17 at 16:48

0

Please use selectedOption For more information https://docs.angularjs.org/api/ng/directive/select and go to Using select with ngOptions and setting a default value section. I hope this will help you.

answered Mar 15 '17 at 16:48

Santosh Sapkota

140
5

score 0 · Answer 2 · answered Mar 15 '17 at 17:51

0

Best way so far to do this is by array.indexOf

ng-options="countries.indexOf(country) as country.name for country in countries"

Working Plunkr

answered Mar 15 '17 at 17:51

amansinghgusain

764
5
17

score 0 · Answer 3 · answered Mar 29 '17 at 09:58

If you want to set nth child as default option in dropdown you have to set your ng-model as per your nth child in the controller like--

$scope.graphsForm.institution=3;

Here "graphsForm.institution" is your dropdown model and "3" is the key (like your example "institution_id") of your nth child that you want to set as default.

You can check this for better understanding--

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="datCtrl">

        <select class="perf-select" ng-model="graphsForm.institution"
   ng-options="inst.institution_id as inst.name for inst in institutions"
   ng-change="setGraphInsti(graphsForm.institution)">
   <option value="">Select Option </option>
  </select>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('datCtrl', function ($scope) {
   $scope.graphsForm={};
   $scope.graphsForm.institution=3;
            $scope.institutions=[{institution_id:1,name:"oxford"},{institution_id:2,name:"havard"},{institution_id:3,name:"cambrige"}];
        });
    </script>

    

</body>

</html>

angularjs select nth child in ng option

3 Answers3