Question

我有以下内容：

<div class="panel">
  <form id="form" method="post" ng-submit="submit">
    <select ng-controller="CountryController" ng-model="model.country" ng-options="country.Id as country.Name for country in model.countries">
      <option value="">Country</option>
    </select>
   </form>
 </div>

div.panel {
  display: none;      
  overflow: hidden;
  position: relative;
}

该面板最初是隐藏的，我有一个显示/隐藏它的按钮。

由于最初隐藏了面板，因此未填充选择。

如果从面板中删除display：none，则填充选择。

我该如何解决这个问题？

Answer 1

这是jsFiddle的链接

Your code on jsFiddle

在jsFiddle示例中，选择是否被隐藏。只需深入了解DOM，您就会看到值。我打算推荐使用ng-show，所以我把它包含在jsFiddle中，但是它变灰了。我想也许这可能是由于嵌套控制器，但在jsFiddle它可以工作。也许玩这个jsFiddle会有所帮助。您能提供更多代码或实际DOM的副本及其显示内容吗？

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-show="showMe" class="panel">
      <form id="form" method="post" ng-submit="submit">
        <select ng-model="model.country" ng-options="country.Id as country.Name for country in countries">
      <option value="">Country</option>
    </select>
   </form>
 </div>

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

app.controller('MyCtrl', function ($scope) {
// on load set default of ng-show
// $scope.showMe = false;
  $scope.countries = [{Id:0, Name: 'USA'},{Id:1, Name: 'China'}];

// When you are ready to show the select, just run a function that sets showMe to true.
});

app.controller('CountryController', function($scope){
  $scope.countries = [{Id:0, Name: 'USA'},{Id:1, Name: 'China'}];
});

更新：以下是Angularjs-selectize工作的工作人员。但是，行为与您所说的相同。通过selectize.js查看它创建自己的模板，并可能根据需要添加和删除它们。这就是我试图获得有关您真正需要发生的事情的更多信息的原因。让我们玩这个，看看你需要什么。或者也许你可以从这个掠夺者得到你需要的东西？

updated plunker

使用角度将数据填充到隐藏的div中

1 个答案: