angular-控制视图显示隐藏

Posted 2021-04-26 web前端知识大全

通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏:

ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素

ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素

(其实只要用到其中一个就可以了)

下面来看个简单的例子,点击按钮可以显示/隐藏元素:

<div class="m20" ng-controller="firstCtrl">
    <button class="layui-btn" ng-click="toggleShow()">{{text}}</button>
    <div class="content" ng-show="ifShow"></div>
</div>

var myApp = angular.module('myApp',[]);
myApp.controller("firstCtrl",function($scope){
    $scope.text = "显示";
    $scope.ifShow = false;
    $scope.toggleShow = function(){
       $scope.ifShow = !$scope.ifShow;
       $scope.text = $scope.text =="隐藏" ? "显示":"隐藏"
   }
});

给button绑定点击事件回调,点击的时候触发toggleShow回调

toggleShow回调会对ifShow变量取反,然后对应的div.content就是被隐藏/显示

同时,toggleShow回调也改变按钮的文本提示