Angularjs can't select default value html select

Question

I've got the following problem while editing an existing CD with angular js. I want the dropdown to be selected to the current id from the ReleaseStudio of the cd.

<select ng-model="cd.ReleaseStudio.id">
        <option ng-repeat="studio in studios" value="{{studio.id}}" >{{studio.name}}</option>
</select>

The code works. The option is bound to the cd.ReleaseStudio.id. But the current cd.ReleaseStudio.id isn't selected by default when I enter the edit screen. It sits on a blank line and I've to reselect the studio, even if I just want to edit the cd.name field.

I found multiple answers on stackoverflow saying it would go automatically, but none of them worked for me. Can somebody tell me what I'm doing wrong?

AngularJS - Set default value on select inside a ng-repeat Angular.js: Using ng-model for dropdowns within ng-repeat

Thanks in advance

score 1 · Accepted Answer · answered Dec 18 '15 at 14:32

1

You should try this way:

<select ng-model="cd.ReleaseStudio.id" ng-options="studio.id as studio.name for studio in studios"></select>

And if you want to have a preselected empty value:

<select ng-model="cd.ReleaseStudio.id" ng-options="studio.id as studio.name for studio in studios">
  <option value=""> --- Please select --- </option>
</select>

answered Dec 18 '15 at 14:32

Ricardo Camacho

106
4

Everything is ok when page load,but when i try to select any other option then it do not let me select any other option.What must be the problem ? – KumarHarsh Jul 21 '17 at 11:55

Suresh B · Answer 2 · 2015-12-18T14:52:18.690

var app =angular.module('pof', []);
 
 
  app.controller('myController2', function($scope){
      $scope.statuses = [{
        id: 1,
        name: "First Value"        
    }, {
        id: 2,
        name: "Second Value"        
    }, {
        id: 3,
        name: "Third Value"        
    }, {
        id: 4,
        name: "Fourth Value"        
    }];
  
    
  
  })

  app.directive('bsDropdown', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            items: '=dropdownData',
            doSelect: '&selectVal',
            selectedItem: '=preselectedItem'
        },
        link: function (scope, element, attrs) {
            var html = '';
            switch (attrs.menuType) {
                case "button":
                    html += '<div class="btn-group"><button class="btn button-label btn-info">Action</button><button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
                    break;
                default:
                    html += '<div class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown"  href="javascript:;">Dropdown<b class="caret"></b></a>';
                    break;
            }
            html += '<ul class="dropdown-menu"><li ng-repeat="item in items"><a tabindex="-1" data-ng-click="selectVal(item)">{{item.name}}</a></li></ul></div>';
            element.append($compile(html)(scope));
            for (var i = 0; i < scope.items.length; i++) {
                if (scope.items[i].id === scope.selectedItem) {
                    scope.bSelectedItem = scope.items[i];
                    break;
                }
            }
            scope.selectVal = function (item) {
                switch (attrs.menuType) {
                    case "button":
                        $('button.button-label', element).html(item.name);
                        break;
                    default:
                        $('a.dropdown-toggle', element).html('<b class="caret"></b> ' + item.name);
                        break;
                }
                scope.doSelect({
                    selectedVal: item.id
                });
            };
            scope.selectVal(scope.bSelectedItem);
        }
    };
});

<link href="http://st.pimg.net/cdn/libs/bootstrap/2.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <script src = "http://st.pimg.net/cdn/libs/jquery/1.8/jquery.min.js">
</script>
<script src = "http://st.pimg.net/cdn/libs/bootstrap/2/js/bootstrap.min.js">
</script>

   <body ng-app="pof">
  
    <div ng-controller="myController2 as myCtrl2">
      <select ng-init="selected_status = statuses[1].id" ng-model="selected_status" ng-options="status.id as status.name for status in statuses"></select>
  Selected Value : {{selected_status}}
 
    </div>    
   
</body>

score 0 · Answer 3 · answered Dec 18 '15 at 14:46

0

<select ng-init="ModelValue = options[0]" ng-model="ModelValue" ng-options="option.name for option in options"></select>

answered Dec 18 '15 at 14:46

Suresh B

1,658
1
17
35

Angularjs can't select default value html select

3 Answers3