angularjs中模型为空时如何隐藏下拉列表？

Posted 2023-03-10

【中文标题】angularjs中模型为空时如何隐藏下拉列表？

【英文标题】：How hide a drop-down list when the model is empty in angularjs?

【发布时间】：2014-08-19 11:23:39

【问题描述】：

我需要在模型为空时隐藏一个下拉列表，并在模型中有值时显示它。

我有一个服务来获取值。

angular.module('myApp.services', ['ngResource']) .factory('OptionsSelect', ['$resource', 功能（$资源） return $resource('http://myapi/miapp/optionselect/1', , 询问： 方法：'GET'， 参数： id：'1'， 是数组：假 ); ])

可能的结果是：

"1":"红色","5":"蓝色","34":"蓝色"

或

<pre>

</pre>

在控制器中：

$scope.optionsSelect = OptionsSelect.query();

观点是：

可以在jsfiddle中查看代码：http://jsfiddle.net/finsi/LMJXC/38/

【问题讨论】：

您的查询表明它需要一个数组 (isArray: true)，但您的结果不是数组，它只是一个对象。这会导致错误。

你是对的，但是是一个错字，在我的真实代码中我有“isArray：false”并且不起作用。谢谢。

【参考方案1】：

您好，我为您创建了 jsbin，请看一下。您应该将模型添加到您的选择指令并使用 $promise ，如下所示。我希望这会有所帮助。

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);
  );




);

【讨论】：

对不起，不工作。如果我在控制器内部定义模型就可以了。但是当我从 OptionsSelect.query() 获取数据时没有。

您可以尝试使用 optionSelect.length >0。我总是显示或总是隐藏什么不起作用？

ng-show="optionsSelect.length>0" 也不起作用

我这种情况下“optionSelect.length >0”总是隐藏。

您确定资源会返回任何数据吗？

【参考方案2】：

所以这些选择的 optionsSelect 对象是未定义的，如果没有返回任何内容，它们将保持未定义，如果 返回某些内容，它们将成为对象。如果它们未定义，您可以隐藏它们吗？比如在这个小提琴...http://jsfiddle.net/LMJXC/40/

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

和

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

【讨论】：

谢谢。你的解决方案很好。但在我的代码中，我没有未定义的结果，我有这个：preproduccion.es/angular-demos/drop-down-list/error/img2.png。解决方案是来自 sylwester 的jsfiddle.net/LMJXC/41