Question

我是Angularjs的新手。我累了秀＆amp;使用下拉选择隐藏div，它正在工作。但我不知道显示默认值。

要求：初始阶段我必须在下拉列表中显示第一个选项并显示相应的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会知道加载时选择了什么。

显示/隐藏div取决于AngularJS中的下拉选择默认值

2 个答案: