how to auto select option with ngmodel (angularjs)

Question

i have a question

"how to auto select option with ngmodel where i use ng-options and item have 2 object"

this is my code:

html

<html>
   <head>
       <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
       <link data-require="font-awesome@4.3.0" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
       <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
       <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
       <script data-require="ui-bootstrap@0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
       <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
       <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
       <link rel="stylesheet" href="style.css" />
       <script src="script.js"></script>
  </head>
  <body ng-app="myApp" ng-controller="appCtrl">
     {{title}}
      <select ng-options="item.val for item in items" ng-model="pilih" name="pilihan" id="pilihan">
      </select>
  </body>
</html>

and JS

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

myApp.controller("appCtrl",function($scope){
  $scope.title="judul";
  $scope.items=[
         {id:1, val:"satu"},
         {id:2, val:"dua"},
         {id:3, val:"tiga"}
      ];

  $scope.pilih="dua";
});

please help me.. thanks before..

It's already answered here http://stackoverflow.com/questions/17329495/how-to-use-ng-option-to-set-default-value-of-select-element — Navaneet, Jun 11 '15 at 10:19

Manish Parakhiya · Answer 1 · 2015-06-11T10:14:19.390

0

You can try ng-init directive.

<select ng-options="item.val for item in items" ng-model="pilih" name="pilihan" id="pilihan" ng-init="pilih=items[1]">
      </select>

Also note that you need to select whole item not only value.

And Also you can assign it from controller

$scope.pilih=$scope.items[1];

edited Jun 11 '15 at 10:14

answered Jun 11 '15 at 10:07

Manish Parakhiya

3,732
3
22
25

score 0 · Answer 2 · answered Jun 11 '15 at 10:07

0

HTML

<select ng-options="item.id as item.val for item in items" ng-model="pilih" name="pilihan" id="pilihan">
</select>

JS

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

myApp.controller("appCtrl",function($scope){
  $scope.title="judul";
  $scope.items=[{id:1, val:"satu"},
  {id:2, val:"dua"},
  {id:3, val:"tiga"}];

  $scope.pilih = 1; // It will select the option which have id 1.
});

answered Jun 11 '15 at 10:07

Surendra Kumar B

118
1
8

thanks for your answer. this code it's work.. but i need 2 object value in selected item.. how to do this? – user3811024 Jun 11 '15 at 10:27

score 0 · Answer 3 · answered Jun 11 '15 at 10:13

All you need to do is to use value from your array into model.

Here is the working copy of the same.

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

myApp.controller("appCtrl",function($scope){
  $scope.title="judul";
  $scope.items=[
         {id:1, val:"satu"},
         {id:2, val:"dua"},
         {id:3, val:"tiga"}
      ];

  $scope.pilih= $scope.items[1];
});

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

  <body ng-app="myApp" ng-controller="appCtrl">
     {{title}}
      <select ng-options="item.val for item in items" ng-model="pilih" name="pilihan" id="pilihan">
      </select>
  </body>

how to auto select option with ngmodel (angularjs)

3 Answers3