Difference with use of using Select as in ng-options

718 Views Asked by At

Select box in IE is causing a problem in the opening for the first time when used with identity as identity.identityName for identity in identityProofList track by identity.identityId or ng-repeat but when used without identity as, it is working fine and can not see any difference in the functionality of select box also.

<select name="identityProof" ng-model="identityProof" ng-change="changeProofOfIdentity(identityProof)" ng-options="identity.identityName for identity in identityProofList track by identity.identityId"  id="identityProofList" >

Where identityProofList is array of objects having properties identityName and identityId.

  1. What is difference b/w the both?

  2. Why ng-repeat is causing problem with IE11.

1

There are 1 best solutions below

1
Zhi Lv On

What is difference b/w the both?

Do you mean the difference between ng-repeat and ng-options?

The difference between using them to create DropdownList is that:

Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

More details, check the AngularJS Select Boxes.

Why ng-repeat is causing problem with IE11 is also with using .

According to your codes, I create a sample using the following code, it works well on my IE browser (11.17134.1.0), you could refer to it.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <p>Select a identity:</p>
    <select ng-model="selectedidentity">
        <option ng-repeat="x in identityProofList " value="{{x.identityId}}">{{x.identityName}}</option>
    </select>
    <h1>You selected: {{selectedidentity}}</h1><br />

    <select name="identityProof" ng-model="identityProof" ng-change="changeProofOfIdentity(identityProof)"
            ng-options="identity as identity.identityName for identity in identityProofList track by identity.identityId"
            id="identityProofList"></select>
    <h1>You selected: {{selectedvalue}}</h1>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.identityProofList = [
            { identityId: "1001", identityName: "Admin" },
            { identityId: "1002", identityName: "User" },
            { identityId: "1003", identityName: "Customer" }
        ];
        $scope.selectedvalue = "";
        $scope.changeProofOfIdentity = function (identity) {
            $scope.selectedvalue = identity.identityName;
        }
    });
</script>

The result like this.