Search code examples
javascriptangularselectdropdownangular-ngselect

NgSelect not selecting the Option in select

Ng-Selected is not selecting the right option even comparison is right. I can see in the output the comparison is working exactly fine.

My actual question is that even after successful comparison (unlike other questions where Int and string comparison returns false). Why it is not selecting the option.

I can't use option for some other purpose. Secondly while copying into the snippet it has some error. That's why it is not working. 

var app = angular.module("app", []);
app.controller("HelloController", function($scope) {

  $scope.data = {
    ExpertiseId: null,
    userExperties = [{
      id: 1,
      ExpertyTitle: "Human Resource"
    }, {
      id: 2,
      ExpertyTitle: "Account & Finance"
    }, {
      id: 3,
      ExpertyTitle: "Information Technology"
    }, {
      id: 4,
      ExpertyTitle: "Business Management"
    }];
  }
});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>AngularJS</title>

</head>

<body ng-app="app">
  <select name="ChooseExpertise" id="ChooseExpertise" class="form-control" ng-model="newAdmin.ExpertiseId" required>
    <option style="display:none" value="">CHOOSE_EXPERTISE</option> 
    <option ng-selected="{{option.id.toString() == data.ExpertiseId.toString()}}" value="{{option.id.toString()}}" ng-repeat="option in data.userExperties">{{option.id.toString()==data.ExpertiseId.toString()}}---{{option.ExpertyTitle}}</option>
  </select>
</body>

</html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Thanks :) Please Help

Solution

  • There are couple of errors in your code.

    1. The object notation is wrong
    2. And you no where used ng-controller
    3. Placed script files outside of html tag.
    4. Also ng-selected syntax is wrong

    I corrected them and updated the snippet.

    var app = angular.module("app", []);
app.controller("HelloController", function($scope) {

  $scope.data = {
    ExpertiseId: 2,
    userExperties : [{
      id: 1,
      ExpertyTitle: "Human Resource"
    }, {
      id: 2,
      ExpertyTitle: "Account & Finance"
    }, {
      id: 3,
      ExpertyTitle: "Information Technology"
    }, {
      id: 4,
      ExpertyTitle: "Business Management"
    }]
  }
});
    <!DOCTYPE html>
<html lang="en">

<head>
  <title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
</head>

<body ng-app="app" >
<div ng-controller="HelloController">
  <select name="ChooseExpertise" id="ChooseExpertise" class="form-control" ng-model="newAdmin.ExpertiseId" required>
    <option  ng-selected="option.id === data.ExpertiseId" ng-repeat="option in data.userExperties" value="{{option.id}}">{{option.id}}</option>
  </select>
  </div>
</body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</html>