angular使用下拉框+表单

矫情吗；* 2022-05-25 13:10 189阅读 0赞

在使用angular的过程中，遇到了很多需要操作下拉框的需求，特地总结一下

## ##

### 第一种查询页面 ###

查询页面就是给一个下拉框，选项从数据库中来，每一次改变还可以联动使其他的下拉框跟着改变

### 修改页面的会有一个默认值 ###

当进入修改页面时候，下拉框会有一个默认值   
chance1：x.id as x.name for x in users   
chance2：x as x.name for x in users   
ng-selected =”” 这一句就是 设置默认值

<label  class="col-sm-2 control-label">是否半年考</label>
    <div class="col-sm-2">
    <select class="form-control"
           ng-model="param.isSemiAnnualExam"
           ng-options="x.id as x.name for x in users"
           ng-selected="x.id==param.isSemiAnnualExam"
    >
           <option value="">请选择</option>
    </select>
    </div>

### 表单的验证 ###

表单的输入框能及时的提示是否合法   
1. input 中 写的 name =“names” 是为了 后面的 form.names.dirty2.ng−pattern=””就是可以自己设置正则表达式3.dirty2.ng−pattern=””就是可以自己设置正则表达式3.error.pattern 就是angular自带的错误提示

<form name="form"><label class="col-sm-2 control-label">半年考基数</label>
    <div class="col-sm-2">
    <input type="text"
       name="baseSemiAnnuals"
       ng-pattern="/^(([1-9]+)|([0-9]+\.[0-9]{1,2}))$/"
       ng-model="param.baseSemiAnnual"
       class="form-control"
    >   <span style="color:red"
    ng-show="form.baseSemiAnnuals.$invalid
    &&form.baseSemiAnnuals.$dirty">
    <span ng-show="form.baseSemiAnnuals.$error.pattern">最多输入两位小数</span>
    </span>  
    </div></form>

### 禁用按钮 ###

如果表单不合法是不能进行提交的   
使用的是 ng-disable=”true 或者false”

### 设置最大长度 ###

给输入数据设置最大最小长度是很常见的   
可以使用 ng-minlength=”” 或者 minlength=”“

### 修改页面的radio框 ###

需要配合数据值确定选择默认值

<div class="checkbox">
        <label>
            指标规则是否可修改
        </label>
        <label>
            <input type="radio" 
                   ng-checked="judgevalue==true"
                   ng-model="param.isModified"
                   value='1'
            >是
        </label>
        <label>
            <input type="radio" 
                   ng-checked="judgevalue==false"
                   ng-model="param.isModified"
                   value='0'
            >否
        </label> 
    </div>

js代码

if($scope.param.isModified!=null&&$scope.param.isModified==1){
        $scope.judgevalue=true;
    }else{
        $scope.judgevalue=false;
    }

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220525/1e1259735bca435c96333838d1e30cf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220525/781d7ebd3131485a847eb41d456e57ae.png