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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

当进入修改页面时候,下拉框会有一个默认值 
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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

表单的验证

表单的输入框能及时的提示是否合法 
1. input 中 写的 name =“names” 是为了 后面的 form.names.dirty2.ngpattern=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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

禁用按钮

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

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

设置最大长度

给输入数据设置最大最小长度是很常见的 
可以使用 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

修改页面的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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

js代码

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


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuehu837769474/article/details/80321274
文章标签: angular1
个人分类: angular
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

angular使用下拉框+表单

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭