angular table的添加搜索

来源：互联网发布：java程序设计流程图编辑：程序博客网时间：2024/06/06 15:38

<body ng-app="myApp" ng-controller="myCtrl">
<center>
  资产登记<br />
  <table border="1px" cellspacing="0px" cellpadding="0px">
   <tr>
    <th>资产编号</th>
    <th>资产名称</th>
    <th>资产数量</th>
   </tr>
   <tr ng-repeat="g in goods">
    <td>{{g.id}}</td>
    <td>{{g.name}}</td>
    <td>{{g.count}}</td>
   </tr>
  </table><br />
  资产搜索:<input type="text" ng-model="name3" />
  <input type="button" value="搜索" ng-click="sousuo()"/><br /><br />
  资产添加<br /><br />
  资产编号:<input type="text" ng-model="id1" /><br /><br />
  资产名称:<input type="text" ng-model="name1" /><br /><br />
  资产数量:<input type="text" ng-model="count1" /><br /><br />
  <input type="button" value="资产录入" ng-click="luru()"/>

</center>

<script>
  var mo = angular.module("myApp",[]);
  mo.controller("myCtrl",function($scope){
   //创建一个数组来放入几组数据
   var arr = [
   {id:10011120,name:"iphoneX",count:10},
   {id:10011121,name:"华为mate10",count:20},
   {id:10011122,name:"vivoR12",count:55}
   ];
   //将数组放进table里面
  $scope.goods = arr;

  //调用录入的方法
  $scope.luru=function(){
   //先拿到输入的编号值
   var n = $scope.id1;
   //判断是不是纯数字和长度
   if(isNaN(n)){
    alert("编号必须为纯数字");
    return;
   }

   if(n.length!=8){
    alert("编号长度必须为8位");
    return;
   }
   //开始判断输入的名称值是否重复
   var name2 = $scope.name1;
   for(var i=0;i<arr.length;i++){
    var g = arr[i];
    if(g.name==name2){
     alert("该资产已经存在");
     return;
    }
   }

   //开始判断输入的数量是不是纯数字
   var count2 = $scope.count1;
   if(isNaN(count2)){
    alert("数量必须为纯数字");
   }

   //所有的判断完成以后开始建立一个对象
   var obj = {
    id:$scope.id1,
    name:$scope.name1,
    count:$scope.count1
   };
   //将对象放入数组并且添加到table里面
   arr.push(obj);
   $scope.goods=arr;
  }
  //搜索方法-根据名称搜索
  $scope.sousuo = function(){
   var ss = $scope.name3;
   //用undefind来作非空判断
   if(ss==undefined){
    alert("不能为空");
    return;
   }
   for(var i=0;i<arr.length;i++){
    var sou = arr[i];
    if(sou.name==ss){
     alert("搜索到相关内容");
     return;
    }
   }
   alert("未搜到相关内容");
  }
  });
</script>
</body>

阅读全文

0 0