AngularJS UI

 

 1, angular ui 自定义弹框

<script type="text/ng-template" id="stackedModal.html">
    <div class="modal-header">
        <h3 class="modal-title" id="modal-title">{{title}}</h3>
    </div>
    <div class="modal-body" id="modal-body-{{name}}">
        <div style="font-size: 16px;">
            <p style="">{{message}}</p>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="checkok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="checkcancel()">Cancel</button>
    </div>
</script>

 

                var modal = $uibModal.open({
                    templateUrl: 'stackedModal.html',
                    resolve: {//这里可以将外部参数传入controller的构造函数中
                        ipobject: function () {
                            return ipobject;
                        }
                    },
                    controller: function ($scope, $uibModalInstance, ipobject) {
                        $scope.ipobject = ipobject;
                        $scope.title = "警告";
                        $scope.message = '取消启用后将不会下发该ip，确定要禁用吗？';
                        $scope.checkok = function () {
                            $uibModalInstance.close('ok');
                        };
                        $scope.checkcancel = function () {
                            $uibModalInstance.dismiss('cancel');
                        };
                        $uibModalInstance.result.then(function (selectedItem) {
                            console.info('Modal ok at: ' + new Date());
                        }, function () {
                            console.info('Modal dismissed at: ' + new Date());
                            $scope.ipobject.isEnable = true;
                        });
                    }
                });

 

2, form validation

<form name="addipform">
<div class="col-md-12 pad-btn-40">
                            <div class="row form-group aps-form-group">
                                <label class="col-sm-2 control-label aps-label ">名称：
                                </label>
                                <div class="col-sm-8">
                                    <input name="ipname" class="form-control" required ng-model="model.name"
                                           placeholder="备注：金桥-电信"
                                           type="text">
                                    <!--<span style="color:red;"-->
                                          <!--ng-show="addipform.ipname.$touched && addipform.ipname.$invalid">*</span>-->
                                </div>
                            </div>
                            <div class="row form-group aps-form-group">
                                <label class="col-sm-2 control-label aps-label ">IP地址：
                                </label>
                                <div class="col-sm-8">
                                    <input required requireip name="ipaddress" class="form-control" ng-model="model.ip"
                                           placeholder="IP地址：127.0.0.1"
                                           type="text">
                                    <!--<span style="color:red;"-->
                                    <!--ng-show="addipform.ipaddress.$touched && addipform.ipaddress.$invalid">*</span>-->
                                </div>
                            </div>
</div>



</form>
<script>
//main controller
app.directive('requireip', function () {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, mCtrl) {
                function myValidation(value) {
                    var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/g;

                    if (value.match(reg)) {
                        mCtrl.$setValidity('charE', true);
                    } else {
                        mCtrl.$setValidity('charE', false);
                    }
                    return value;
                }

                mCtrl.$parsers.push(myValidation);
            }
        }
    });

</script>