dropdown selected value not setting and displaying blank text in angular js

Question

I am working on C#/MVC application with angularJS. I need to display dropdown on popup, If record already have value then by default that value should be selected otherwise default option choose an option.

I am able to bind dropdown and If I debug I am getting correct ng-model value but its displaying blank.

Here is controller code on pop up open click

$scope.ShowAdPopup = function (adId) {

  $scope.Popup.CategoryId = 0;
  $scope.Popup.InterestId = 0;
  $scope.Popup.SourceId = 0;

  var filteredData = $filter('filter')($scope.gridAdData, { id: adId }, true);

  if (filteredData.length > 0) {
     $scope.Popup.Id = filteredData[0].id;
     $scope.Popup.AdId = filteredData[0].adId;
     $scope.Popup.AdName = filteredData[0].adName;
     $scope.Popup.Category = filteredData[0].category;
     $scope.Popup.Interest = filteredData[0].interest;
     $scope.Popup.Source = filteredData[0].source;
     $scope.Popup.AdUrl = filteredData[0].adUrl;
     $scope.Popup.CategoryId = filteredData[0].categoryId;
     $scope.Popup.InterestId = filteredData[0].interestId;
     $scope.Popup.SourceId = filteredData[0].sourceId;
 }
 $("#divAddGroup").modal({ show: true, backdrop: 'static', keyboard: false });

}

And html is as below

<div class="form-group">
<label class="col-sm-3 control-label">Category</label>
<!--<div class="col-sm-9">
    <input type="text" name="category" class="form-control" ng-model="Popup.Category" />
</div>-->
<div class="col-sm-9">
    <select class="form-control" name="categoryDrp" ng-model="Popup.CategoryId">
        <option value="">-- choose an option --</option>
        <option ng-repeat="item in CategoryData" value="{{item.id}}">{{item.categoryName}}</option>
    </select>
</div>

Now If I debug and I can see CategoryId setting correct id . e.g. 7 or 8 or 9 which CategoryData have already but its display 'blank' as first option if Id is available

If CategoryId is null then it display '-- choose an option --' which is correct

have a look here- docs.angularjs.org/api/ng/directive/ngSelected — Khairul Islam
– Khairul Islam, Commented May 1, 2017 at 7:34

Sajal · Accepted Answer · 2017-05-01 08:07:37Z

1

Try ng-selected="item.id == Popup.CategoryId" as :

<select class="form-control" name="categoryDrp" ng-model="Popup.CategoryId">
  <option value="">-- choose an option --</option>
  <option ng-repeat="item in CategoryData" value="{{item.id}}" 
          ng-selected="item.id == Popup.CategoryId">{{item.categoryName}}</option>
</select>

answered May 1, 2017 at 8:07

Sajal

4,4111 gold badge22 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

dropdown selected value not setting and displaying blank text in angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related