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

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

咨询电话 : 010-59478634

亚马逊运营

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

如何去设计下拉框,默认有一个为空的怎么办?

0

1

angular view

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

HTML:
<div class="col-sm-3">
                <select class="">
                    <option value="">全部</option>
                    <option value="{{x}}" ng-repeat="(x,y) in productname">{{y.text}}</option>
                </select>
            </div>
JS:
angular
  .module("myApp")
  .constant("productname", [
    { value: "0", text: "新手计划" },
    { value: "1", text: "聚财一号" },
    { value: "2", text: "聚财二号" }
  ]);

该问题已被官方收录

怎么使用angular的过滤得到接口中的数据？

0

1

angular model angular view

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

myApp.filter('let',function (type){
    return function(index){
        console.log(index);
    return type[index]
    }
})
myApp.filter('category',function(type1){
    return function(index){
        return type1[index]
    }
})

该问题已被官方收录

ng-messages不显示提示

1

1

angular model

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<form class="myForm" name="myForm">
    <div class="list">
      <label class="item item-input">
        <img src="../../img/iphone.png">
        <input type="text"
               placeholder="请输入手机号"
               name="mobile"
               ng-model="mobile"
               maxlength="11"
               ng-maxlength="11"
               ng-pattern="/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/"
               >
      </label>
      <label class="item item-input">
        <img src="../../img/lock.png">
        <input type="password"
               placeholder="请输入登录密码"
               name="password"
               ng-model="pwd"
               ng-pattern="/(?!.*[\u4E00-\u9FA5\s])(?!^[a-zA-Z]+$)(?!^[\d]+$)(?!^[^a-zA-Z\d]+$)^.{6,16}$/"
               >
      </label>
    </div>
    <div class="btn">
      <button class="button button-block"
              ng-disabled="myForm.mobile.$error.required || myForm.password.$error.required">登录
      </button>
      <a ui-sref="register">立即注册</a>
      <a class="right" ui-sref="1">忘记密码?</a>
    </div>
    <div ng-messages="myForm.mobile.$error"
         class="error"
         ng-if="myForm.mobile.$invalid">
      <div ng-message="maxlength">不能大于3位</div>
      <div ng-message="pattern">账号格式错误</div>
    </div>
    <div ng-messages="myForm.password.$error"
         class="error"
         ng-if="myForm.password.$invalid">
      <div ng-message="pattern">密码格式错误</div>
    </div>
  </form>

该问题已被官方收录

搜索模块的问题

0

1

angular model

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  private encodeParams(params:searchParams){
 
   return Object.keys(params)
     .filter(key =>params[key])
     .reduce((sum:URLSearchParams,key:string)=>{
       sum.append(key,params[key]);
       return sum;
     },new URLSearchParams());
  }
  search(params:searchParams):Observable<string>{
    const url = `${this.httpUrl}a/article/search`;
    return this.httpClient.get(url, { params:this.encodeParams(params)});
  }

}
export class searchParams {

  constructor(
      public category: Number,
      public dateage: string,
      public state: string,
  ){
  }
}

该问题已被官方收录

编辑页面，获取文章数据后，select设置value不能显示选项

0

1

angular model

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

解决办法：查阅官方文档如下

Caveat: Option selection
Angular uses object identity to select option. It's possible for the identities of items to change while the data does not. This can happen, for example, if the items are produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response will produce objects with different identities.

To customize the default option comparison algorithm, <select> supports compareWithinput.compareWith takes a function which has two arguments: option1 and option2. If compareWith is given, Angular selects option by the return value of the function.

Syntax

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
 <option *ngFor="let country of countries" [ngValue]="country">
   {{country.name}}
 </option>
</select>
compareFn(c1: Country, c2: Country): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
 

按此法成功解决

解决方法二：用ng-select插件

Step 1: Install ng-select:
npm install --save @ng-select/ng-select

Step 2: Import the NgSelectModule and angular FormsModule module:

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
@NgModule({
 declarations: [AppComponent],
 imports: [NgSelectModule, FormsModule],
 bootstrap: [AppComponent]
})
export class AppModule {}
Step 3: Include a theme:
To allow customization and theming, ng-select bundle includes only generic styles that are necessary for correct layout and positioning. To get full look of the control, include one of the themes in your application. If you're using the Angular CLI, you can add this to your styles.scss or include it in .angular-cli.json(Angular v5 and below) or angular.json (Angular v6 onwards).


@import "~@ng-select/ng-select/themes/default.theme.css";
// ... or  
@import "~@ng-select/ng-select/themes/material.theme.css";

该问题已被官方收录

父路由。list 子路由article 在list。article里无法操作

0

1

angular model angular router

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="ask" ng-show="askShow">
                <div class="ask-box">
                    <p>提示</p>
                    <p ng-bind="askText"></p>
                    <div>
                        <button class="bg-orange" ng-click="cancle()" ng-show="cancleButton">取消</button>
                        <button class="bg-blue" ng-click="confirm()">确定</button>
                    </div>
                </div>
            </div>

 $scope.askShow = false //弹窗默认隐藏
        $scope.cancleButton = true //取消按钮默认显示
        $scope.delArticle = function (id) { //点击删除
            $scope.askShow = true; //弹窗出现
            // $(".bg-orange").show();
            $scope.cancleButton = true

.state("list", {
            url: "/list",
            templateUrl: "views/list.html",
            controller: "listController",
            resolve: {
                loadMyCtrl: _lazyLoad(['css/list.css','js/controller/list.js'])
            }
        })


.state("list", {
            url: "/list",
            templateUrl: "views/list.html",
            controller: "listController",
            resolve: {
                loadMyCtrl: _lazyLoad(['css/list.css','js/controller/list.js'])
            }
        })

该问题已被官方收录

用AngularJS请求登录接口，有报错。

1

1

$http

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 angular.module('myApp',[ ]).controller('stage',function ($scope,$http,$state) {
        $scope.submit = function () {
            $http.post("/carrots-admin-ajax/a/login", {
                params: {
                    name: $scope.users,
                    pwd: $scope.word
                },
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).then(function (xhr) {
                       // console(xhr.responseText);
                    if (xhr.data.code == 0) {
                        $state.go("");
                    } else{ $scope.text = xhr.data.message;}
                    console.log($scope.users);
                },
                function () {
                    // console(xhr.responseText);
                    alert("请求成功");
                });

        }
    })

该问题已被官方收录

为什么会选择页数后没有反应

0

1

$http angular router

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

app.controller('listCtrl', function ($scope, $http, $state, $stateParams, types, status) {

    //取出constant里面的types、status
    $scope.types = types;
    $scope.status = status;


    //初始化页面数据
    $scope.params = $stateParams;
    $scope.datstart = Number($scope.params.startAt) || undefined;
    $scope.datend = Number($scope.params.endAt) || undefined;
    $scope.thetype = $scope.params.type;  // 刷新后能保存类型状态
    $scope.thestatus = $scope.params.status;
    $scope.articletotal = $scope.params.total;
    $scope.currentPage = $scope.params.page || 1;
    $scope.currentSize = $scope.params.size || 10;
    console.log(1);


    //请求后台数据
    $http ({
        method: 'GET',
        url: '/carrots-admin-ajax/a/article/search',
        params: $scope.params,
        responseType: 'json'
    }).then (function (response) {
        if (response.data.code == 0) {
            $scope.articleList = response.data.data.articleList;
            $scope.totalItems = response.data.data.total;
            $scope.currentPage = $scope.params.page || 1;
            $scope.currentSize = $scope.params.size || 10;
            console.log(11);
            // $scope.size = response.data.data.size;
            // $scope.currentSize = response.data.data.size;
            // $scope.currentPage = response.data.data.page;
        }else {
            alert("请求失败!");
        }
    });


    //日期插件
    $scope.format = "yyyy/MM/dd";
    $scope.altInputFormats = ['yyyy/MM/dd'];
    $scope.popup1 = {
        opened: false
    };
    $scope.popup2 = {
        opened: false
    };
    $scope.open1 = function () {
        $scope.popup1.opened = true;
    };
    $scope.open2 = function () {
        $scope.popup2.opened = true;
    };




    //点击清除按钮清除搜索框选项
    $scope.clear = function () {
        $state.go('home.list', {
            startAt: undefined,
            endAt: undefined,
            type: undefined,
            status: undefined,
        }, {
            reload:true
        })
    };


    //点击搜索按钮返回搜索框里面的参数的值
    $scope.search = function () {
        // 第一次进入列表页面获取到的时间为Mon Mar 05 2018 00:00:00 GMT+0800这种格式，则需要解析为时间戳
        if (typeof $scope.datstart == "object") {
            $scope.datstart = $scope.datstart.getTime();
        }
        // 结束日期需要加上1天减1毫秒
        if (typeof $scope.datend == "object") {
            $scope.datend = $scope.datend.getTime() + 86399999;
        }
        $state.go("home.list", {
            startAt: $scope.datstart,
            endAt: $scope.datend,
            type: $scope.thetype,
            status: $scope.thestatus,
            // page: 1
        }, {
            reload: true
        });
    };


    //上线
    //下线
    //编辑
    //删除
    $scope.listdelete = function () {
        console.log('delete');
    }
    
    
    //分页插件选择第几页
    $scope.pickpage = function () {
        $state.go("home.list", {
            page: $scope.currentPage,
        }, {
            reload: true
        });
    };

    
    //确定按钮选择跳转到第几页
    $scope.pagetogo = function () {
        $state.go('home.list', {
            page: $scope.pagepicker,
            size: $scope.currentSize
        }, {
            reload: true
        })
    }
});
////////////////////////////////////////////////////////////


//自定义类型过滤器
app.filter("typeChange",function (types) {
    return function (thetype) {
        return types[thetype]
    }
});

//自定义状态过滤器
app.filter('statusChange', function (status) {
    return function (thestatus) {
        return status[thestatus]
    }
});

该问题已被官方收录

怎样使用angular路由

0

1

angular model angular router

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

如图

该问题已被官方收录

动态设置select的选项值，无效

0

1

angular model

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$scope.startAt=$scope.inputData.startAt;
$scope.endAt=$scope.inputData.endAt;
console.log($scope.inputData.type);
$scope.selectedType=myConstant.types.type4;//使用常量中的数据
console.log($scope.selectedType);
$scope.selectedState=$scope.inputData.status;//使用会话存储中的数据

<div class="col-md-4 col-sm-12">
        <div class="row">
            <label class="col-md-4 col-sm-4">类    型</label>
            <div class="col-md-8 col-sm-12">
                <select  ng-init="selectedType = types.type1"
                         ng-model="selectedType"
                         ng-options="y.type for (x, y) in types">
                </select>
                <span>{{selectedType}}</span>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-12">
        <div class="row">
            <label class="col-md-4 col-sm-4">状    态</label>
            <div class="col-md-8 col-sm-12">
                <select  ng-init="selectedState = initSelectedState"
                         ng-model="selectedState"
                         ng-options="y.state for (x,y) in states">
                </select>
                <span>{{selectedState}}</span>
            </div>
        </div>
    </div>
</div>

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1