Multi tool use

AngularJS - Set default value on select inside a ng-repeat [duplicate]

This question already has an answer here:

I'm facing to an issue with AngularJS - I'm not able to display the selected value in a <select>.

<select>

Here is my use case:

I have a view which starts by an ng-repeat to display components. Each component contains a select to choose the vat rate. When creating new items, it looks fine. But when I'm editing existing items, the actual vatRate code is not displayed in the select, and instead I see the default option "-- Select VAT Rate --" instead of the selected VAT.

My model only contains the Id of the vat Rate.

With a single component I can use a variable in the $scope to set the current item value, but here I can have multiple components, each of them has its own vat rate, so I am not sure how do that here:

Here is my code

And the objects:

$scope.vatRates = [
{ 'id': 1, 'value' : '20' },
{ 'id': 2, 'value' : '10' },
{ 'id': 3, 'value' : '7' }
];

$scope.items = [
{ 'id': 1, 'title' : 'Title1', 'vatRateId' : '1' },
{ 'id': 2, 'title' : 'Title2', 'vatRateId' : '2' },
{ 'id': 3, 'title' : 'Title3', 'vatRateId' : '3' }
];


Here is a live demo to explain my issue:

Demo on PLNKR

I'm not able to set to each item in the select the right value.

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

updateVatRate

settings

4 Answers
4

I am not very much clear about your requirement but if you want to display a default selected value to <select>, you can use ng-selected. In order to use that you need to have default selected value in your controller as a model to your <select> and add ng-selected to your <options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">

<select>

<select>

<options ng-selected="{{defaultvalue == value.id}}" ng-repeat="value in vatRates">

For code and reference i just altered your plunker,

http://embed.plnkr.co/ZXo8n0jE8r3LsgdhR0QP/preview

Hope this helps.

ng-selected="'Matt'"

ng-selected="{{ value == 'Matt' }}"

ngModel

ngSelected

ngModel

ng-selected

{{ }}

You should set the default value on the ng-model via controller instead of ng-init. From the docs

ng-model

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

— AngularJS ng-init Directive API Reference - Overview

angular.module('app', )
.controller('SelectController', function() {

var selectCtrl = this;
selectCtrl.values = ["Value 1", "Value 2", "Value 3"];
selectCtrl.selectedValue = "Value 1";
})

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js


This is the only way i managed to do it, and its done when another select is changing. (maybe thats the cause other solutions don't work, please note the extra ""+ to force it to be a string. (otherwise not working)

In the controller:

$scope.formData.number_of_persons = "̲"̲+̲ $scope.numberOfPersons[0].val;


HTML:

<select name="number_of_persons"
id="number_of_persons"
ng-model="formData.number_of_persons"
required>
<option ng-repeat="option in numberOfPersons" value="{{option.val}}">
{{option.val}}
</option>
</select>


ng-value

select

ngValue

<select ng-model="val" ng-init="myval = vals[0]">
<option ng-repeat="myval in vals" value="{{myval.value}}">{{val.name}}
</option>
</select>