类似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的值自动决定是显是隐。