Angular: Select Options using ng-repeat

Question

I have a problem using <select> with ng-repeat in Angular.

I'm using the following code:

HTML:

<select ng-model="device.remote" ng-repeat="remoteID in device.remoteIDs">
    <option value="{{ remoteID.id }}">{{ remoteID.name }}</option>
</select>

Angular:

$scope.device = response.data;

response.data looks like this:

{
    "remote": "",
    "remoteIDs": [
        {
            "id": "1",
            "name": "TEST"
        }
    ]
}

In the WebApp I get this result:

<option value="? string: ?"></option>
<option value="1" class="ng-binding">TEST</option>

but I dont want to show the ? string: ?-option. How can I remove it?

I only want to display the options in remoteIDs

will be easy to help you if u share $scope.device data

Sa E Chowdary
– Sa E Chowdary

2017-04-18 12:18:59 +00:00
Commented Apr 18, 2017 at 12:18 — Sa E Chowdary
– Sa E Chowdary, Commented Apr 18, 2017 at 12:18
$scope.device is exactly the same as response.data

modsfabio
– modsfabio

2017-04-18 12:20:18 +00:00
Commented Apr 18, 2017 at 12:20 — modsfabio
– modsfabio, Commented Apr 18, 2017 at 12:20
Try use ng-options instead of ng-repeat

Hadi
– Hadi

2017-04-18 12:22:28 +00:00
Commented Apr 18, 2017 at 12:22 — Hadi
– Hadi, Commented Apr 18, 2017 at 12:22

Alok · Accepted Answer · 2017-04-18 12:28:49Z

2

You need to give a default option to the users.

You can do this by simply adding:

<option value="" disabled="true">Please Select</option>

See the example in code.

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.device = {
      "remote": "",
      "remoteIDs": [
          {
              "id": "1",
              "name": "TEST"
          }
      ]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />

<body ng-app="app" ng-controller="ctrl">
  <div class="col-lg-12">
    <select ng-model="device.remote" class="mySelect">
      <option value="" disabled="true">Please Select</option>
      <option value="{{ remoteID.id }}" ng-repeat="remoteID in device.remoteIDs">{{ remoteID.name }}           </option>
  </select>
  </div>
</body>

answered Apr 18, 2017 at 12:28

Alok

1,3101 gold badge11 silver badges21 bronze badges

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

4 Comments

modsfabio Over a year ago

That's it! Thank you very much!

Nikhil Mohanan Over a year ago

But ,In this case how can we deselect an option that is already selected?I think its better to remove the ng-disabled.

Alok Over a year ago

@Mr.niks It depends on the use case. If it is required for the user to be able to deselect an option then remove the "disabled" bit on the default option.

modsfabio Over a year ago

Yes, I removed the disabled="true" and it works just fine

Love-Kesh · Accepted Answer · 2017-04-18 12:22:43Z

0

<select ng-model="device.remote>
    <option ng-repeat="remoteID in device.remoteIDs" 
        ng-if="remoteID.id" value="{{ remoteID.id }}">{{ remoteID.name }}</option>
</select>

answered Apr 18, 2017 at 12:22

Love-Kesh

8129 silver badges17 bronze badges

Comments

Sachila Ranawaka · Accepted Answer · 2017-04-18 12:23:28Z

don't understand why are you using ng repeat in the select element. use it in the options

 <select ng-model="device.remote">
        <option  ng-repeat="remoteID in device.remoteIDs" value="{{ remoteID.id }}">{{ remoteID.name }}</option>
    </select>

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.device = {
    "remote": "",
    "remoteIDs": [
        {
            "id": "1",
            "name": "TEST"
        }
    ]
}

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <select ng-model="device.remote">
    <option  ng-repeat="remoteID in device.remoteIDs" value="{{ remoteID.id }}">{{ remoteID.name }}</option>
</select>
</div>

Nikhil Mohanan · Accepted Answer · 2017-04-18 12:28:29Z

If you want to remove that empty option, you should take the first option as default selected. or you can give an empty option without any value please see the snippet,

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>

<body ng-controller="MainCtrl">
  <select ng-model="device.remote" ng-repeat="remoteID in device.remoteIDs">
    <option value="{{ remoteID.id }}">{{ remoteID.name }}</option>
  </select>
  <select ng-model="device1.remote" ng-repeat="remoteID in device1.remoteIDs">
    <option value="">select</option>
    <option value="{{ remoteID.id }}">{{ remoteID.name }}</option>
  </select>
  <script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {


      $scope.device = {
        "remote": "1",
        "remoteIDs": [{
          "id": "1",
          "name": "TEST"
        }]
      };

      $scope.device1 = {
        "remote": "",
        "remoteIDs": [{
          "id": "1",
          "name": "TEST"
        }]
      };


    });
  </script>
</body>

</html>

Collectives™ on Stack Overflow

Angular: Select Options using ng-repeat

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related