select box value not working in IE using AngularJs

Question

below my dropdown is working fine in firefox, chrome. but in Internet explore while selecting the 2 value , dropdown box (first time) selected first value only , Thanks in advance

for ref check below link in IE :

http://jsfiddle.net/ExpertSystem/fDdwe/

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.users = [
        {id: 1, name: 'Me'},
        {id: 2, name: 'You'}
    ];
});

app.directive('select', function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        priority: 10,
        link: function postLink(scope, elem, attrs, ctrl) {
            if (!ctrl) { return; }
            var originalRender = ctrl.$render.bind(ctrl);
            ctrl.$render = function () {
                originalRender();
                if (elem.val() === '?') {
                    ctrl.$setViewValue(undefined);
                }
            };
        }
    };
});

.error {
    color: Red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-form="form1">
    <select name="select1"
            ng-model="userId" 
            ng-options="user.id as user.name for user in users"
            ng-init="userId=3"
            required>
    </select>
    <div class="error" ng-show="form1.select1.$invalid">Required field !</div>
    <div class="error" ng-show="form1.$invalid">Invalid form !</div>
    <br />
     <button ng-click="userId=1;">Set valid value</button>
<button ng-click="userId=3;">Set invalid value</button>
<hr />
    <hr />
    <pre>userId: {{userId}}</pre>
</div>

What version of IE are you using? I've tried with IE10 and found it works the same as Chrome. Have you tried to clear the cache? — gm2008
– gm2008, Commented Dec 23, 2015 at 14:50
It does not work for me with IE 11.0.9600.18124. I load the fiddle, click run, select the "You" option in the select, and it selects "Me" instead. — Seth Flowers
– Seth Flowers, Commented Dec 23, 2015 at 14:52

Nelson · Accepted Answer · 2015-12-24 07:39:30Z

2

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.users = [
        {id: 1, name: 'Me'},
        {id: 2, name: 'You'}
    ];
});

app.directive('select', function () {
    return {
        restrict: 'E',
        require: '?ngModel',
        priority: 10,
        link: function postLink(scope, elem, attrs, ctrl) {
            if (!ctrl) { return; }
            var originalRender = ctrl.$render.bind(ctrl);
            ctrl.$render = function () {
                originalRender();
                if (elem.val() === '?') {
                    ctrl.$setViewValue(undefined);
                }
            };
        }
    };
});

.error {
    color: Red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-form="form1">

  <select ng-model="userId">
    <option ng-repeat="user in users"
            value="{{user.id}}">
      {{user.name}}
    </option>
</select>
  
    
    <div class="error" ng-show="form1.select1.$invalid">Required field !</div>
    <div class="error" ng-show="form1.$invalid">Invalid form !</div>
    <br />
    <button ng-click="userId=1;">Set valid value</button>
    <button ng-click="userId=3;">Set invalid value</button>
    <hr />
    <pre>userId: {{userId}}</pre>
</div>

edited Dec 24, 2015 at 7:39

Nelson

3834 silver badges17 bronze badges

answered Dec 24, 2015 at 4:52

Suresh B

1,6521 gold badge18 silver badges35 bronze badges

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

1 Comment

Suresh B Over a year ago

copy and paste it in jsfiddle and check

Seth Flowers · Accepted Answer · 2015-12-23 14:57:42Z

1

Add an empty option to the select list.

<select name="select1"
  ng-model="userId" 
  ng-options="user.id as user.name for user in users"
  ng-init="userId=3"
  required>
  <option value=""></option>
</select>

Note however that you may have to play around with it to get your invalid logic to work as you expect.

edited Dec 23, 2015 at 14:57

answered Dec 23, 2015 at 14:50

Seth Flowers

9,2302 gold badges34 silver badges46 bronze badges

Collectives™ on Stack Overflow

select box value not working in IE using AngularJs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related