1. 程式人生 > >ionic v1 新增點選展開/收縮功能

ionic v1 新增點選展開/收縮功能

類似QQ的收縮列表,利用ionic1來實現其實很簡單
假設我們要在通過點選一個圖示來作為觸發的

<div ng-control="osController">點選這裡展開/收縮<i src="xxx.png" alt="" ></div>

我們給這個圖示新增一個點選事件,如:

<i src="xxx.png" alt="" ng-click="openOrShrink()">

通過利用ng-show來控制列表的顯示與隱藏,因此,我們在我們的列表出新增,如:

<div ng-repeate="m in lists" ng-show="showOrNot()"
>
</div>

接下來需要在相應的controller裡新增業務邏輯,如:

angular.module('ionicApp', ['ionic'])
.controller("osController",function($scope){
            //設定一個屬性來控制顯隱
            $scope.openshow = true;
            //當點選圖示時切換顯隱性
            $scope.openOrShrink = function (){
                $scope.openshow = !$scope
.openshow; } $scope.showOrNot = function (){ return $scope.openshow; } });

大功告成,這樣當點選圖示時,列表就會根據openshow的值自動決定是顯是隱。