Angular ng-model select option first element empty

Question

HTML:

<select ng-model="item.visible">
        <option value="0">NO</option>
        <option value="1">YES</option>
</select>

ITEM:

$scope.item.visible = 1; //doesn't work
$scope.item.visible = "1" //works fine

I absolutely don't understand why first solution doesn't work and my problem is that I'm getting this value from database and I can't change it to string. I think solution could be use a directive. But I'm sure there will be much better solution. Thanks for help.

using ng-options will avoid such corner case

Pankaj Parkar
– Pankaj Parkar

2015-07-19 22:16:19 +00:00
Commented Jul 19, 2015 at 22:16 — Pankaj Parkar
– Pankaj Parkar, Commented Jul 19, 2015 at 22:16

dfsq · Accepted Answer · 2015-07-19 22:15:45Z

1

It doesn't work because Angular uses strict comparison of the model value with the value bound to option. If you can't use string value as model you could cast it in HTML with ngInit directive:

<select ng-model="item.visible" ng-init="item.visible=item.visible + ''">
    <option value="0">NO</option>
    <option value="1">YES</option>
</select>

then it will work with both $scope.item.visible = 1; and $scope.item.visible = "1";.

Demo: http://plnkr.co/edit/kZJbVRtyHQ19LUbDALFx?p=preview

answered Jul 19, 2015 at 22:15

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

Angular ng-model select option first element empty

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related