Show/Hide div 取决于 AngularJS 中的下拉菜单 select 的默认值

Question

我是 Angularjs 的新手。我已经厌倦了 show & hide div using dropdown select 并且它正在工作。但是我不知道要显示默认值。

要求：初始阶段我必须在下拉列表中显示第一个选项并显示相应的div

HTML :

<div ng-app="myApp" ng-controller="MyCtrl">
   <select name="name" ng-model="region.name" ng-dropdown required ng-change="changeme()"
     <option ng-option value="us" selected="selected">us</option>
     <option ng-option value="uk">uk</option>
   </select>
  <div id="one" ng-if="region.name == 'us'"> US based event</div>
  <div id="two" ng-if="region.name == 'uk'"> UK based event</div>
</div>

JS:

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $window, $element) {
  $scope.changeme = function() {
        //no code
  }

});

参考代码：jsfiddle

Answer 1

要设置默认值，只需在您的控制器中分配它们：

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $window, $element) {
  $scope.region.name = 'uk';

});

查看更新的 jsfiddle here。

回答你的部分问题，它不起作用的原因是你实际上没有在任何地方初始化对象。当您的代码尝试访问 region.name 时，region 尚未定义，并导致 ng-if 语句不再尝试验证。要解决这个问题，请在开始时初始化完整对象：

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

myApp.controller('MyCtrl', function($scope, $window, $element) {
  $scope.region = {
    name: 'us'
  };
});

查看更新的 jsfiddle here。

Answer 2

当您将范围变量绑定到 select 时，它会查找它包含的选项。

在您的代码中，$scope.region.name 为空或未定义，因此它与您定义的任何选项都不匹配。

您可以在控制器上设置默认值，例如：

$scope.region.name = "us"

select 现在知道 select 加载了什么。

Show/Hide div 取决于 AngularJS 中的下拉菜单 select 的默认值

Show/Hide div depend on dropdown select in AngularJS with default value

html

javascript

html-select

angularjs