AngularJS - 當選擇選項值等於特定值時隱藏表格

請幫助實施此類功能。如果選項值== 1，請隱藏下面的表單。AngularJS - 當選擇選項值等於特定值時隱藏表格

<select ng-model="selection"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
<select> 

<form ng-hide="isHidden"> <!-- Form to be hidden when option value == 1 --> 
    <!-- Some html code here... --> 
</form>

這裏是控制器的一部分。

$scope.isHidden = true; 

if($scope.selection == '1'){ 
    $scope.isHidden = false; 
}

當前的代碼無效。請幫我實施這個。謝謝。

來源

2013-06-21 sharic19

你可以只參照selection在ng-hide指令：

<form ng-hide="selection == '1'"> 
    <!-- Some html code here... --> 
</form>

這裏有一個working example。

來源

2013-06-21 07:30:28

我明白了。這就是它的工作原理。非常感謝。剛開始探索AngularJS。 :) – sharic19

您可以將watch添加到選擇屬性：

$scope.$watch('selection',function(newValue){ 
    $scope.isHidden = newValue != '1'; 
});

來源

2013-06-21 07:30:10

它也有效。感謝您分享您的知識。 :) – sharic19

您應該處理更改事件並將所有邏輯放到JavaScript文件中。這不僅分離了您的顧慮，而且使調試更加容易。你可以使用$ scope。$監視和控制整個事情在控制器中不顯眼，但是由於你的邏輯將會操縱UI，所以最好在UI的ng-change中提供一些邏輯的其他程序員的提示。這可以防止出現「表單到哪裏去了？」之類的情況。接下來是一個小時的搜索邏輯。

HTML：

<form name="myForm"> 
    <select ng-model="selection" ng-change="handleSelectionChange()"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
    <select> 
</form>

控制器：

$scope.handleSelectionChange = function(){ 
    if($scope.selection=='1'){ 
     document.myForm.style.display = 'none'; 
    } 
};`

我無法驗證碼的功能，我的手機，所以直到我能，讓這項工作作爲一種方法的想法。我會盡快在我的桌面上測試代碼。

來源

2013-06-21 08:09:46

AngularJS - 當選擇選項值等於特定值時隱藏表格

回答

相關問題