Question

请帮助实现此类功能。如果选项值== 1，请隐藏下面的表单。

<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;
}

目前的代码无效。请帮我实现这个。感谢。

Answer 1

您可以参考selection指令中的ng-hide：

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

这是working example。

Answer 2

您可以向选择属性添加watch：

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

Answer 3

您应该处理更改事件并将所有逻辑放入JavaScript文件中。这不仅可以分离您的疑虑，还可以使调试更容易。您可以使用$ scope。$ watch并在控制器中不显眼地处理整个事情，但由于您的逻辑将操纵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';
    }
};`

我无法在手机上验证代码的功能，所以在我可以之前，让这个工作作为一种方法的想法。我会在到达桌面后立即测试代码。

AngularJS - 当选择选项值等于特定值时隐藏表单

3 个答案: