AngularJs实现显示与隐藏
设置点击按钮,进行显示表格
<button ng-click="isshow=true">新增的产品</button>
设置显示与隐藏的控件
<table ng-show="isshow" style="margin-left: 120px;"> <tr> <td> 产品编号:<input type="text" name="num" ng-model="numId" required/><br /> 产品信息:<input type="text" name="message" ng-model="msgId" required/><br /> 产品数量:<input type="number" name="nums" ng-model="numsId" required/><br /> 产品单价:<input type="number" name="dj" ng-model="djId" required/><br /> <input type="button" value="添加" ng-click="newAdd();" style="margin-left: 70px;"/> </td> </tr> </table>
/执行添加数据的操作/
$scope.newAdd = function(){ //设置表单验证 var flag; var flag1; var flag2; var flag3; if($scope.numId==null || $scope.numId==""){ alert("产品编号不能为空"); flag=false; }else if(isNaN($scope.numId)){ alert("产品编号必须为数字"); flag=false; }else if($scope.msgId==null || $scope.msgId==""){ alert("产品信息不能为空"); flag1=false; }else if($scope.numsId==null || $scope.numsId==""){ alert("产品数量不能为空"); flag2=false; }else if($scope.djId==null || $scope.djId==""){ alert("产品单价不能为空"); flag3=false; }else{ //设置信息数据为true flag=true; flag1=true; flag2=true; flag3=true; } if(flag && flag1&& flag2&& flag3){ //弹框提示成功 alert("添加成功"); //添加数据 $scope.users.push({ id:$scope.numId,msg:$scope.msgId,num:$scope.numsId,price:$scope.djId }); }else{//弹框提示失败 alert("添加失败"); return; } //数据信息置空 $scope.numId=""; $scope.msgId=""; $scope.numsId=""; $scope.djId=""; //隐藏 $scope.isshow=false; } ```