angularjs

Select, default value in AngularJS


Hey I have problem with set default value in select problem is started when I set inside array objects. How can I fix this problem??

HTML

<div ng-app="select" ng-controller="checking">
  <select ng-model="lala" ng-options="item.name for item in arrayName">
  </select>
</div>

JavaScript

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

app.controller('checking', ($scope)=> {
  $scope.arrayName = [{'name':'first'}, {'name':'second'}, {'name':'third'}]; 
  $scope.lala = "first";
});

https://codepen.io/Turqus/pen/EbvGzv?editors=1111


Solution

  • All you need to do is change your ng-options to include a select as

    <select ng-model="lala" ng-options="item.name as item.name for item in arrayName">
    

    var app = angular.module('select', []);
    
    app.controller('checking', function($scope) {
      $scope.arrayName = [{
        'name': 'first'
      }, {
        'name': 'second'
      }, {
        'name': 'third'
      }];
    
      $scope.lala = 'first';
    
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="select" ng-controller="checking">
    
      <select ng-model="lala" ng-options="item.name as item.name for item in arrayName"></select>
      
      <p>Value of lala: <b>{{lala}}</b></p>
      
    </div>