ionic v1 新增點選展開/收縮功能
阿新 • • 發佈:2019-02-02
類似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的值自動決定是顯是隱。