IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

angular6时间选择器如何使用

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

1. ngx-daterangepicker-material时间选择器angular6组件使用：

1.1安装组件

    npm install ngx-daterangepicker-material --save



1.2引入依赖：

    ...
    import { FormsModule } from '@angular/forms';
    import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
    import { App } from './app';
    
    @NgModule({
        imports:      [... , FormsModule, NgxDaterangepickerMd],
        declarations: [App],
        bootstrap:    [App]
    })
    export class AppModule {}

1.3html设置

         <div>                                                                                      
          <input type="text"                                                                         
             ngxDaterangepickerMd                                                                   
             [isInvalidDate]="isInvalidDate"                                                         
             [isCustomDate]="isCustomDate"                                                           
             [locale]="{format: 'DD/MM/YYYY', firstDay: 1}"                                         
             [(ngModel)]="selected"                                                                 
             [singleDatePicker]="true"                                                               
             [autoApply]="true"                                                                     
             [maxDate]="maxDate"                                                                     
              [minDate]="minDate"  />                             
           </div>                                                                                              

1.4ypescript:

    import { Component, OnInit } from '@angular/core';
    import * as moment from 'moment';
    
    @Component({
      selector: 'single-datepicker',
      templateUrl: './single-datepicker.component.html',
      styleUrls: ['./single-datepicker.component.scss']
    })
    export class SingleDatepickerComponent implements OnInit {
      selected = moment();
      maxDate: moment.Moment;
      minDate: moment.Moment;
      constructor() { }
      ngOnInit() {
      this.maxDate = moment().add(1);
      }
      isInvalidDate(date) {
        return date.weekday() === 0;
      }
      isCustomDate(date) {
        return  (
          date.weekday() === 0 || date.weekday() === 6
        )  ? 'mycustomdate' : false;
      }
    
    }

####

组件和指令数据加载出错

0

1

angular 指令

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 scope: {
                conf: '='
            },

<pagination ng-if='$ctrl.paginationConf' conf="$ctrl.paginationConf"></pagination>

select和后台数据绑定的问题

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

                <select class="form-control">
                    <option>请选择</option>
                    <option value="0">首页Banner</option>
                    <option value="1">找职位Banner</option>
                    <option value="2">找精英Banner</option>
                    <option value="3">行业大图</option>
                </select>

如何封装ajax 服务

0

1

angular服务

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

angular.module('routerApp')

    // 请求服务封装
    .factory('userService', function ($http, path) {
        return {
            //登陆接口请求
            login: function (params) {
                return $http.post(path.login(), params)
            },
            //退出接口地址
            logout: function (params) {
                return $http.post(path.logout(), params)
            },
            //article管理部分
            //新增article
            addArticle: function (params) {
                return $http.post(path.addArticle(), params)
            },
            //编辑article
            redactArticle: function (id, params) {
                return $http.put(path.redactArticle(id), params)
            },
            //修改上线下线
            articleStatus: function (params) {
                return $http.put(path.articleStatus(), params)
            },
            //删除article
            deleteArticle: function (id) {
                return $http.delete(path.deleteArticle(id))
            },
            //获得单个article
            oneArticle: function (id, params) {
                return $http.get(path.oneArticle(id), params)
            },
            //按条件获得article列表
            searchArticle: function (params) {
                return $http({
                    method: 'GET',
                    url: path.searchArticle(),
                    params: params
                })
            },
            //上传图片
            postImg: function (params) {
                return $http({
                    method: 'post',
                    
                    url: path.postImg(),
                    data: params,
                    headers: {
                        'Content-Type': undefined
                    },
                    transformRequest: function (data) {
                        return data
                    }
                })
            }
        }
    })

angularJS中如何在不同路由页面之间传递参数？有几种方法？

0

1

url传参

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

angular

$state.go传参需要哪些东西配合

0

1

angular router

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

app.controller('articleListCtrl',function ($scope,$http,$state,$stateParams) {
    $http({
        method:'GET',
        url: '/carrots-admin-ajax/a/article/search',
        params: $stateParams
    }).then(function successCallback(response) {
        console.log(response);
        console.log($stateParams);
        $scope.articleList = response.data.data.articleList;
        $scope.size= response.data.data.size;
        $scope.total = response.data.data.total;
        $("#page").initPage($scope.total,1,GG.kk);
        // $state.go('frameState.articleList',{
        //     page: 1,
        //     size: $scope.size,
        //     endAt: undefined,
        //     startAt:undefined,
        //     type: undefined,
        // },{reload:true})

另一段

 .state('frameState.articleList',{
            url:'/articleList?page?size?endAt?startAt?type?status?',
            templateUrl:'pages/articlePage.html',
            controller:'articleListCtrl'
        })