How hide a drop-down list when the model is empty in angularjs?

Question

I need to hide a drop-down list when the model is empty and to show it when there are values in the model.

I have a service to get the values.

angular.module('myApp.services', ['ngResource'])
    .factory('OptionsSelect', ['$resource',
        function ($resource) {
            return $resource('http://myapi/miapp/optionselect/1', {}, {
                query: {
                    method: 'GET',
                    params: { id: '1' },
                    isArray: false
                }
            });
        }
    ])

The possible result is:
```
{"1":"red","5":"blue","34":"blue"}
```

or

<pre>
{}
</pre>

In the controller:

$scope.optionsSelect = OptionsSelect.query();

The view is:

 <div class="form-group" ng-hide="isHide()">
    <select class="form-control" ng-options="key as value for (key, value) in optionsSelect">
 </div>

You can view the code in jsfiddle: http://jsfiddle.net/finsi/LMJXC/38/

Your query indicates that it is expecting an array (isArray: true), but your result is not an array, it's just an object. That's going to cause an error. — Jerrad
– Jerrad, Commented Jun 28, 2014 at 14:44
You are right but is a typo, in my real code I have "isArray: false" and doesn't work. Thank you. — DAVINCHI
– DAVINCHI, Commented Jun 28, 2014 at 16:40

sylwester · Accepted Answer · 2014-06-28 19:15:14Z

0

Hi I've created jsbin for you please have a look. You should add model to you select directive and use $promise like it is below. I hope that will help.

HTML:

 <div class="form-group" ng-show="optionsSelect">
    <select class="form-control" 
            ng-model="option.color"
            ng-options="key as value for (key, value) in optionsSelect">
 </div>

JS:

  app.controller('firstCtrl', function($scope, OptionsSelect){
    $scope.optionsSelect = {};

  OptionsSelect.query().$promise.then(function(optionSelectCollection){

    angular.copy(optionSelectCollection, $scope.optionsSelect);
  });




});

edited Jun 28, 2014 at 19:15

answered Jun 28, 2014 at 13:28

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

13 Comments

DAVINCHI Over a year ago

Sorry, but don't work. If I define the model inside of the controller is ok. But when I get the data from OptionsSelect.query() not.

sylwester Over a year ago

You can try with optionSelect.length >0. What is not working I'd always shown or always hide?

DAVINCHI Over a year ago

ng-show="optionsSelect.length>0" does not work either

DAVINCHI Over a year ago

I this case "optionSelect.length >0" always hide.

sylwester Over a year ago

Are you sure that resources return any data?

|

tarrball · Accepted Answer · 2014-06-28 20:51:12Z

0

So these selected optionsSelect objects are undefined, they stay undefined if nothing is returned and become objects if something is returned. Can you just hide them if they're undefined? Such as in this fiddle...http://jsfiddle.net/LMJXC/40/

<div class="form-group" ng-hide="optionsSelect === undefined">

and

<div class="form-group" ng-hide="optionsSelect2 === undefined">

answered Jun 28, 2014 at 20:51

tarrball

2,3563 gold badges26 silver badges38 bronze badges

1 Comment

DAVINCHI Over a year ago

Thanks you. Your solution is fine. But in my code, I haven't an undefined results, I have this: preproduccion.es/angular-demos/drop-down-list/error/img2.png. The solution is jsfiddle.net/LMJXC/41 from sylwester

Collectives™ on Stack Overflow

How hide a drop-down list when the model is empty in angularjs?

2 Answers 2

13 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related