angular使用下拉框+表单

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

 

 

第一种查询页面

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

<label class="col-sm-2 control-label">一级部门</label>
<div class="col-sm-2">
<select ng-model="firstDept"
       ng-options="x as x.subCompanyName
       for x in firstDeptData"
         class="form-control"
  ng-change="changeLinkDept(firstDept.subCompanyId,3)">
<option value="">请选择</option>
</select>
</div>

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

当进入修改页面时候，下拉框会有一个默认值 
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”

<button type="submit"
class="btn btn-default"
    ng-disabled='form.$invalid'
    ng-click="saveUpdateInfo()" >保存</button>

设置最大长度

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

<label   class="col-sm-2 control-label">备注</label>
<div class="col-sm-8">
     <textarea class=" col-sm-6 form-control"
       ng-model="param.remark" 
       maxlength="200" minlength="1"
       rows="5"></textarea>
</div>

修改页面的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;
}

---

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