Question

我在两个不同的div中有日期和时间。我有两个复选框 1.添加额外的 - 它将在每个日期和时间中再添加一个div 2.时间/日期相同 - 它只会添加日期div。需要隐藏时间div。

HTML

<input type="checkbox" ng-click="addMore(keyAdd);" ng-model="keyAdd"> <label for="dateCheck">Add Additional</label> &nbsp; &nbsp;
<input type="checkbox" ng-model="keyOnlyDate"> <label for="configDate">Time/Place will be the same</label>

控制器

$scope.addMore = function(Attr) {
    if (Attr && $scope.keyCount <= 2 && $scope.keyOnlyDate == false) {
        $scope.selects.push({});
        $scope.keyCount++;
        $scope.keyAdd = false;
        $scope.keyOnlyDate = false;
    } else if (Attr && $scope.keyCount <= 2 && $scope.keyOnlyDate == true) {
        $scope.selects.push({});
        $(".timePiker").hide();
        $scope.keyCount++;
        $scope.keyAdd = false;
        $scope.keyOnlyDate = false;
    }
}

我需要仅根据索引值隐藏timePiker。怎么做？

Answer 1

你可以使用

ng-show ="expression"

或

 ng-hide ="expression"

 ng-if ="expression" //in this case it will be removed from Dom

例如

<input type="checkbox" ng-click="addMore(keyAdd);" ng-model = "keyAdd" > <label for="dateCheck" ng-if ="keyOnlyDate ">Add Additional</label>

Answer 2

或者您可以使用ng-class。我推荐ng-class，因为你更灵活，你可以用它创建漂亮的动画，例如你可以变换或旋转元素。

ng-class="{'active': expression}"

在Angular中显示/隐藏div

2 个答案: