angular select validation and selected attribute

Question

If I write this:

    <select name="udaljenosti_{$index}}" class="form-control" required>
       <option value="">Choose</option>
       <option ng-repeat="choice in attribute.Choices" value="{{choice.Id}}" ng-selected="choice.IsSelected==true">{{choice.Name}} </option>
     </select>

I don't get validation working. But when I write this:

 <select name="udaljenosti_{{$index}}" ng-model="attribute.Choices.Name" ng-options="item.Id as item.Name  for item in attribute.Choices" class="form-control" required ng-required="true">
       <option value="">Choose</option>
 </select>

validation is working but I don't know how to prepopulate select with selected option (IsSeletected property from the first example) This is JSON response: enter image description here

Actually am confused. What you want? do you want default selected option? or what? And where you using validation code? — Ramesh Rajendran
– Ramesh Rajendran, Commented Apr 13, 2015 at 11:27
@Ramesh Rajendran Read first example. Do you see something like this: ng-selected="choice.IsSelected==true". choice list has IsSelected attribute on it. — Vlado Pandžić
– Vlado Pandžić, Commented Apr 13, 2015 at 11:28
Yes i saw that, ng-selected helps to set a default value. but you mean by it a validation purpose, That's a point for my confusion — Ramesh Rajendran
– Ramesh Rajendran, Commented Apr 13, 2015 at 11:29
Validation is not working in first example althought there is ng-required attribute. In second example validation is working but I don't know how to make third option selected(If we asume third option has IsSelected property we talked about) — Vlado Pandžić
– Vlado Pandžić, Commented Apr 13, 2015 at 11:31
If the question is not easy to understand I will clearfy. I don't see reason for downvoting. — Vlado Pandžić
– Vlado Pandžić, Commented Apr 13, 2015 at 11:32

Rishi Prakash · Accepted Answer · 2015-04-13 12:02:48Z

1

Didn't get any error

tried your code, with predefined value in ng-model.

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <select   ng-model="selectedPerson" ng-options="p.first as p.last for p in people" class="form-control" required ng-required="true">
       <option value="">Choose</option>
 </select>
     {{ selectedPerson }}
  </div>
</div>

function TodoCtrl($scope) {

    $scope.people = [
        { id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' },
        { id: 2, first: 'Rocky', last: 'Balboa', actor: 'Silvester' },
        { id: 3, first: 'John', last: 'Kimble', actor: 'Arnold' },
        { id: 4, first: 'Ben', last: 'Richards', actor: 'Arnold' }
    ];
    $scope.selectedPerson = 'Ben'; 

}

here is the working jsfiddle enter link description here

you just need to make sure ,than value is ng-model is right, in your case must match with what your ID AngularJS will automatically show you correct option selected in dropdown.

YOUR ERROR IS YOU ARE USING ng-model="attribute.Choices.Name , instead of ng-model="attribute.Choices.Id

answered Apr 13, 2015 at 12:02

Rishi Prakash

1,8092 gold badges18 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Vlado Pandžić Over a year ago

I have more complicated situation. My select's are inside ng-repetar. I found solution. name="udaljenosti_{{$index}}" ng-model="udaljenosti_{{$index}}". ng-model and name must match to make validation working.

Vlado Pandžić Over a year ago

But there is another problem. i dont' know how to use {{}} interpolaction inside ng-model

Rishi Prakash Over a year ago

wait. In ng-repeat , you don't need ng-model. ng-repat is independent of ng-model.

Vlado Pandžić Over a year ago

This helped: YOUR ERROR IS YOU ARE USING ng-model="attribute.Choices.Name , instead of ng-model="attribute.Choices.Id. Thanks

Vlado Pandžić Over a year ago

There is also one problem. When the selected is untouched and prepopulated from database I get error that is required when I submit the form.

|

roxid · Accepted Answer · 2015-04-13 11:42:42Z

0

Try this code ng-selected="attribute.choice[$index].IsSelected==true"

try to use this instead of your code.

 <select name="udaljenosti_{{$index}}" ng-model="attribute.Choices.Name" 
 ng-options="item.Id as item.Name  for item in attribute.Choices"
 class="form-  control" required ng-required="true" 
 ng-selected=**"attribute.choice[$index].IsSelected==true"**>
                 <option value="">Choose</option>
                </select>

edited Apr 13, 2015 at 11:42

roxid

5034 silver badges15 bronze badges

answered Apr 13, 2015 at 11:36

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

1 Comment

Vlado Pandžić Over a year ago

No, it is not working, I made edit on question to make it more understandable (I deleted "$index").(I have select elements inside ng-repeater, that's why I had $index in name attribute)

Collectives™ on Stack Overflow

angular select validation and selected attribute

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related