onsen ui button-bar的用法嘗試

效果圖:

html 中的代碼:

     	<div style="width:100%; background:lightgray; padding:10px 0px;">
				<div class="button-bar" style="margin:0px auto;float: left">
				  <div class="button-bar__item showThis" ng-click="events.sending(1)">
                                        <button class="button-bar__button" ng-class="{'button-active':switchStatus==1}">正在發送</button>
				  </div>

				  <div class="button-bar__item showLast" ng-click="events.alreadySend(2)">
					<button class="button-bar__button" ng-class="{'button-active':switchStatus==2}">已發送</button>
				  </div>

				  <div class="button-bar__item showLast" ng-click="events.wailtSend(3)">
					<button class="button-bar__button" ng-class="{'button-active':switchStatus==3}">待發送</button>
				  </div>
                                <div class="button-bar__item showLast" ng-click="events.alreadySave(4)">
					<button class="button-bar__button" ng-class="{'button-active':switchStatus==4}">已保存</button>
				  </div>

				  <div class="button-bar__item showLast" ng-click="events.failSend(5)">
					<button class="button-bar__button" ng-class="{'button-active':switchStatus==5}">發送失敗</button>
				  </div>
				</div>
	</div>

在typescript中的代碼:

 sending(status:number){
         let $log = this.$log;
        let $ocLazyLoad = this.$ocLazyLoad;
        let $window = this.$window;
        let $scope = this.$scope;
       $scope.switchStatus = status;
       $log.debug( $scope.switchStatus+" $scope.switchStatus");
    };
      alreadySend(status:number){
         let $log = this.$log;
        let $ocLazyLoad = this.$ocLazyLoad;
        let $window = this.$window;
        let $scope = this.$scope;
        $scope.switchStatus = status;
          $log.debug( $scope.switchStatus+" $scope.switchStatus");
    };
      wailtSend(status:number){
         let $log = this.$log;
        let $ocLazyLoad = this.$ocLazyLoad;
        let $window = this.$window;
        let $scope = this.$scope;
        $scope.switchStatus = status;
          $log.debug( $scope.switchStatus+" $scope.switchStatus");
    }
      alreadySave(status:number){
         let $log = this.$log;
        let $ocLazyLoad = this.$ocLazyLoad;
        let $window = this.$window;
        let $scope = this.$scope;
        $scope.switchStatus = status;
          $log.debug( $scope.switchStatus+" $scope.switchStatus");
    }  
     failSend(status:number){
         let $log = this.$log;
        let $ocLazyLoad = this.$ocLazyLoad;
        let $window = this.$window;
        let $scope = this.$scope;
        $scope.switchStatus = status;
          $log.debug( $scope.switchStatus+" $scope.switchStatus");
    }  


發佈了34 篇原創文章 · 獲贊 33 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章