ionic总结二

小白，写得有点乱，对angular了解还比较浅，个人项目总结，仅做参考

《quanshun》应用技术，ionic+angularjs

1.ng-repeat的使用例：

html代码：

controller代码：

2.$ionicPopup的使用 title中可插入html标签 例：

$scope.aAlert=function(){
    $ionicPopup.alert({title:"<h3>温馨提示</h3>",template:'此功能暂未开通',cssClass:'AgentClass',buttons:[{text:'取消'}]});
}

3. $ionicModal的弹出方式可自行用css添加 例：

$ionicModal.fromTemplateUrl("templates/Client/daijiao-tel.html", {
    scope: $scope,
    animation: "slide-in-right"
}).then(function (modal) {
    $scope.modal = modal;
});  

animation："slide-in-right"的值可自定增加css样式，代码如下
.slide-in-right {
    -webkit-transform: translateX(-100%);
    transform: translateX(100%);
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
.slide-in-right.ng-enter, .slide-in-right > .ng-enter {
    -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
    transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
}
.slide-in-right.ng-enter-active, .slide-in-right > .ng-enter-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.slide-in-right.ng-leave, .slide-in-right > .ng-leave {
    -webkit-transition: all ease-in-out 250ms;
    transition: all ease-in-out 250ms;
}
.slide-in-left {
    -webkit-transform: translateX(-100%);
    transform: translateX(100%);
}
.slide-in-left.ng-enter, .slide-in-left > .ng-enter {
    -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
    transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
}
.slide-in-left.ng-enter-active, .slide-in-left > .ng-enter-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.slide-in-left.ng-leave, .slide-in-left > .ng-leave {
    -webkit-transition: all ease-in-out 250ms;
    transition: all ease-in-out 250ms;
}
4.复选按钮调至右边 例：
html代码： 
<li class="item item-checkbox DaiLi">
    <span>使用我的账号结算</span>
    <label class="checkbox daiCheckbox">
        <input type="checkbox" checked>
    </label>
</li>
css代码：
   
   

    
    

     
     .daiCheckbox>input
     
      {
    
    
   
   
   
   
    position: absolute!important;
    right: 8px;
   
   

    
    }
   
   

5.模态框传值  例（用form表单传值）：
html 代码：
<ion-modal-view>
    <form name="myForm">
        <div class="bar bar-header header-h">
            <a class="button  icon ion-ios-arrow-left button-clear"  ng-click="claseM()" style="margin: 0 0 0 10px;"></a>
            <h1 class="h1 title">联系电话</h1>
            <a  class="button button-clear" ng-click="closeTelModal(myForm)">保存</a>
        </div>
        <ion-content class="has-header padding">

            <div class="list list-inset">
                <label class="item item-input">
                    <input type="tel" ng-pattern="/0?(13|14|15|18)[0-9]{9}/" placeholder="请输入手机号码" maxlength="11" minlength="11" ng-model="telphone" name="telphone" required>
                </label>
            </div>
        </ion-content>
    </form>
</ion-modal-view>
controller代码：
$ionicModal.fromTemplateUrl("templates/Client/daijiao-tel.html", {
    scope: $scope,
    animation: "slide-in-right"
}).then(function (modal) {
    $scope.modal = modal;
});
$scope.openTelModal = function () {
    $scope.modal.show();
};
$scope.closeTelModal = function (myForm) {
    //console.log(myForm.telphone)
    if (myForm.telphone.$$lastCommittedViewValue == undefined || myForm.telphone.$$lastCommittedViewValue == "") {
        //alert("不能为空")
        $ionicPopup.alert({
            title: '<h3>抱歉</h3>',
            template: '<span>电话号码不能为空</span>',
            cssClass: 'telClass',
            buttons: [{
                text: '我知道了'
            }]
        })
    }

    else if (myForm.telphone.$invalid) {
        //alert("djlk")
        $ionicPopup.alert({
            title: '<h3>抱歉</h3>',
            template: '<span>请输入正确的手机号码</span>',
            cssClass: 'telClass',
            buttons: [{
                text: '我知道了'
            }]
        })
    }

    if (myForm.$valid) {
        //alert("ok")
        $scope.modal.hide();
    }
    //$scope.modal.hide();
    $scope.telphone = myForm.telphone.$$lastCommittedViewValue;

};
$scope.claseM = function () {
    $scope.modal.hide();
};
//Cleanup the modal when we are done with it!
$scope.$on("$destroy", function () {
    $scope.modal.remove();
});
// Execute action on hide modal
$scope.$on("modal.hidden", function () {
    // Execute action
});
// Execute action on remove modal
$scope.$on("modal.removed", function () {
    // Execute action
});

6.上拉菜单（传值）例：
html：
<ion-item  class="item-icon-right" ng-click="show()">
    <span ng-bind="items.firstname"></span>
    <span style=" position: absolute;right: 50px;line-height: 23px;" ng-bind="nb"></span>
    <i class="icon ion-ios-arrow-right"></i>
</ion-item>
controller：
$scope.show = function () {
    $ionicActionSheet.show({
        buttons: [
            {text: '1'},
            {text: '2'}
        ],
        buttonClicked: function (index) {
            if (index == 0) {
                $scope.nb = '1';
                return true;
            }
            if (index == 1) {
                $scope.nb = '2';
                return true;
            }
        },
        cssClass: 'daijiaoAc'
    })
};