Angularjs Add strange option into select

Question

Hello I have the same issue

i have strange option like this

<option value="? string:98 ?"></option>

Html Code

 <select  ng-model="vm.student" class="form-control">
   <option value="0">All</option>
   <option data-ng-repeat="src in vm.studentList" value="{{ src.Id }}"> {{ 
   src.Value }} </option>
</select>

and the default value go in the bottom doesn't appear I am trying many ways to fix this problem but unfortunately, no way work well

I hope to help me to fix this issue

thanks

Have you tried [ng-options](https://docs.angularjs.org/api/ng/directive/ngOptions)? — Madhan Varadhodiyil, Aug 03 '18 at 09:45

score 0 · Answer 1 · answered Aug 03 '18 at 11:11

0

Use the ng-value directive:

<select ng-model="vm.student" class="form-control">
   <option ng-value="0">All</option>
   <option data-ng-repeat="src in vm.studentList" ng-value="src.Id">
     {{src.Value}}
   </option>
</select>

For more information,

answered Aug 03 '18 at 11:11

georgeawg

48,608
13
72
95

Not Working with me – FiryCode Aug 03 '18 at 12:10

score 0 · Answer 2 · answered Aug 03 '18 at 11:44

0

It can be solved using ng-options

By referring to Madhan Varadhodiyil example

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="AppCtrl">
       <select  ng-model="student" class="form-control" ng-options="src.Id as src.Value for src in studentList">
         <option value="">All</option>   <!-- value="" helps to remove void space from dropdown -->
       </select>                
    </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope){
    $scope.studentList = [
        {
            "Id": 98,
            "Value": "Jon Snow"
        },
        {
            "Id": 99,
            "Value": "Mother of dragons"
        }
    ];
    
   $scope.student = $scope.studentList[0].Id; // I want Id:98 to be selected by default
});</script>

Hope it helps, Cheers!

answered Aug 03 '18 at 11:44

Nikhil Zurunge

716
6
10

in this example, the default value of selector will not be "All" – FiryCode Aug 03 '18 at 12:03
its just an example, you can keep 'All' as default by commenting `// $scope.student = $scope.studentList[0].Id;` – Nikhil Zurunge Aug 03 '18 at 12:37
I tried but the same problem when I change from input1 the first option in input2 become empty strange option – FiryCode Aug 03 '18 at 12:49
I doubt the id which you are binding with `ng-model="vm.student"` is not in the array _( in this case it shows blank )_ I suggest you should check the 'Id' which you are passing. – Nikhil Zurunge Aug 03 '18 at 13:00
No in the array the problem show in just one case when I change the value from input one – FiryCode Aug 03 '18 at 13:17

Angularjs Add strange option into select

2 Answers2