顯示/隱藏div取決於AngularJS中的下拉選擇，默認值爲

我是Angularjs的新手。我累了顯示&使用下拉選擇隱藏div，它正在工作。但我不知道要顯示默認值。顯示/隱藏div取決於AngularJS中的下拉選擇，默認值爲

要求：初始階段，我必須顯示在下拉菜單中的第一個選項，並顯示相應的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 
    } 

});

Ref code：jsfiddle

來源

2017-06-30 RAN

要設置默認值，只要將它們在你的控制器：

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。

來源

2017-06-30 02:44:16 FrankerZ

謝謝你的回覆。但我也必須顯示相應的div。 – RAN

@RAN我已更新我的回答 – FrankerZ

謝謝，它的工作。我們可以將名稱值設爲動態嗎？ – RAN

將範圍變量綁定到select時，它會查找它包含的選項。

在你的代碼中，$ scope.region.name是空的或未定義的，因此它不符合你定義的任何選項。

您可以爲EX設置控制器上的默認值：

$scope.region.name = "us"

的選擇現在知道什麼是負載選擇。

來源

2017-06-30 02:46:24 ljpv14

謝謝你的回覆。在這裏我也要顯示相應的div。而區域值（我們）是動態的。 – RAN

顯示/隱藏div取決於AngularJS中的下拉選擇，默認值爲

回答

相關問題