发表于: 2017-06-14 22:09:21

1 1005


今日所做:

1.学些了一下angular的一些表单验证方法

2.使用ng-blur、ng-class对标题输入进行表单验证:

<span class="title-name">标题名称</span>
<input ng-class="{true:'title-input',false:'title-require'}[require]"
      ng-blur="checkTitle()"
      ng-model="titleInput"
>
<span ng-hide="require" class="input-require">*必填项</span>

ng-blur绑定一个函数,用来查看input输入是否为空,ng-class用来根据变量值

来选择类名,不同类名的样式提前设置好

3.函数绑定:

$scope.checkTitle=function(){
if($scope.titleInput==""){
$scope.require=false;
 }else{$scope.require=true}
};

4.类型选项如果选择特定选项需要填出另一个select,需要结合ng-hide,并设置两个变量

来使用:

<select ng-class="{true:'type-select',false:'select-require'}[haveType]"
       ng-model="type"
       ng-blur="checkType()"
       ng-change="changeType()"
>
   <option value="">全部</option>
   <option ng-repeat="(x,y) in typeOption" ng-value="x">{{y}}</option>
</select >
<span class="new-industry" ng-hide="type==3?false:true">行业</span>
<select class="industry-select"
       ng-hide="type==3?false:true"
       ng-class="{true:'industry-select',false:'industry-no'}[haveIndustry]"
       ng-blur="checkIndustry()"
       ng-model="industry"
>
   <option value="">全部</option>
   <option ng-repeat="(x,y) in industryOption" ng-value="x">{{y}}</option>
</select >
<span ng-hide="haveType" class="type-require">*此项为必选项</span>
<span ng-hide="type==3?(haveIndustry==false?false:true):true" class="industry-require">*请选择具体行业</span>

5.两个选项卡在不同的操作下会出现bug,进行调试,适应多种操作情况

明日计划:

将信息上传功能做好

今日收获:

对angular原声表单验证有了更多的应用


返回列表 返回列表
评论

    分享到