Initializing Select with Angularjs and Ng-Repeat

Initializing select with AngularJS and ng-repeat

OK. If you don't want to use the correct way ng-options, you can add ng-selected attribute with a condition check logic for the option directive to to make the pre-select work.

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

Working Demo

Initializing select with ng-options, ng-repeat and ng-selected in AngularJS

This stackoverflow question will explain why there is an empty option

Why does AngularJS include an empty option in select?

To fix your problem, add this:

$scope.level = $scope.levels[0].name;

Full fiddle: http://jsfiddle.net/nrybr0rf/2/

AngularJS dynamic select within ng-repeat using ng-options - set default selected option

Try below, it should work:

<select ng-model="currentSelectedProperty.Name" ng-init="currentSelectedProperty.Name=data.sortInfo.availableProperties[0]" ng-options="item as item.PropertyDisplayName for item in data.sortInfo.availableProperties track by item.PropertyName">

How to initialize a select value when option is in ng-repeat?

Remember to read the docs:

"Do not use select as and track by in the same expression. They are not designed to work together." https://docs.angularjs.org/api/ng/directive/ngOptions

http://jsfiddle.net/qm7f2kqj/

All you needed was to fix up your ng-options:

<div ng-controller="Ctrl">
    <select ng-init="sid = 473" ng-model='sid'
      ng-options="y.id as ( y.id + ' - ' + y.title) for y in arr">
    </select>
    <input type="hidden" name="size" value="{{sid}}"/>
    {{ sid }}
    <button ng-click='sid=474'>change to 474</button>
</div>

angular select ng-selected not working (with option ng-repeat)

ngValue expects a string for the ngValue. To use ngRepeat with the <option> tag, then use value="{{item}}" instead of ng-value. Expand the snippet below to see it working.

angular.module('myApp', [])  .controller('ctrl', function($scope) {    $scope.vm = {      priceTypes: [{          id: 3,          name: 'pound'        },        {          id: 5,          name: 'Yen'        },        {          id: 6,          name: 'dollar'        }      ]    };    //select model value    $scope.localModel = {      priceType: $scope.vm.priceTypes[1]    };  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script><div ng-app="myApp" ng-controller="ctrl">  <select ng-model="localModel.priceType">  <option             ng-repeat="item in vm.priceTypes as item"            ng-selected="localModel.priceType.id == item.id"            value="{{item}}"            >{{item.name}}</option></select>  <div>    priceType: {{ localModel.priceType }}  </div></div>

Default selected value in select with ng-repeat

have you checked the documentation or searched on the google? based on what I know, you can't do a default value using that approach. and also there is a dedicated directive for making options efficiently.

I'm a newbie but hope I helped you with my answer.

use ngOptions
https://docs.angularjs.org/api/ng/directive/ngOptions

/**   somewhere in your controller*/    editProfilCtrl.infos.department = editProfilCtrl.infos.departments[0]

  <select     id="department"     name="department"     class="form-control"    ng-model="editProfilCtrl.infos.department"    ng-change="editProfilCtrl.findCities()" ng-options="dep.idDepartment+' '+dep.code+' '+dep.name for dep in editProfilCtrl.infos.departments"></select>

select with ngRepeat dont select item when first element selected

Use ng-attr-value="s.Key" instead of value="{{s.Key}}".

Try plnkr

Notice the difference is just the value:

<select ng-model="k.Key" >
  <option ng-repeat="s in skus" ng-selected="s.Key === k.Key" 
     ng-attr-value="s.Key">{{s.Value}}</option>
</select>

The expression evaluation time using {{}} and the ng-repeat compile time are not in sync as one may think. This explain why only the last was selected.

While according to official documentation - choosing between ng-options and ng-repeat you can use ng-repeat for ng-options but in the cases when you are dealing with objects instead of Ids you may like to use select as syntax. Also there are other performance reasons why you may want to do so.

---

Related Topics