温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

angularjs_xeditable整合typeahead完成智能提示

发布时间:2020-07-06 12:46:43 来源:网络 阅读:548 作者:_Johnson 栏目:开发技术

  按照需求,需要在angularjs的xeditable中加入typeahead,来完成智能提示,并且在选择后,把该条数据的其他信息也显示在此行中,于是做了一下的测试修改。


当然,既然用了xeditable肯定就需要加入这个模块。

var Myapp = angular.module('Myapp ',['xeditable']);


下面是页面上的html代码

<div ng-controller="productController">
<table class="table table-bordered table-condensed">
   <tr >
         <td >类型</td>
         <td >名称</td>
         
      
      <td >Edit</td>
    </tr>
    <tr ng-repeat="product in products"> 
      <td>     
         <span editable-text="product.type" e-name="type" e-form="rowform" 
         e-uib-typeahead="products.type  for products in products | filter:$viewValue | limitTo:8" 
         e-typeahead-on-select="getProductDetail($item, $model)" 
         >
          {{ product.type || 'empty' }}
        </span>
      </td> 
      <td>     
         <span editable-text="product.name" e-name="name" e-form="rowform" >
          {{ product.name || 'empty' }}
        </span>
      </td>     
      
      <td >
        <form editable-form name="rowform" onbeforesave="saveProduct($data,product.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == product">
          <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>
        <div class="buttons" ng-show="!rowform.$visible">
          <button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
          <button class="btn btn-danger" ng-click="removeProduct($index,product)">del</button>
        </div>  
      </td>
    </tr>
  </table>
  <button class="btn btn-default" ng-click="addProduc()">Add row</button>
</div>

Js代码

   //因为暂时未能解决$http的同步问题,所以只能取出所有数据,然后在匹配
            $http.get("selectAllProduct")
		  .success(function(data){
			  $scope.products=data;
		  })		
  //获取产品详细信息           
          $scope.getProductDetail = function ($item, $model) { 
              $scope.inserted = {
        		      type: $model
        		      name: $item.name,
              }
              $scope.products[$scope.products.length-1]=$scope.inserted;
          };
   //保存产品
          $scope.saveProduct= function(data,id) {
		   angular.extend(data, {id: id});
		    return $http.post('saveProduct', data);
	      };
   //添加行
          $scope.addProduct = function() {
              
		    $scope.inserted = {
		      type: '',
		      name:''
		    };
		    $scope.esms.push($scope.inserted);  
		 }
   //删除行	 
		  $scope.removeProduct = function(index,product) {
			 if (confirm("你确定删除此现有安全措施?")){
		          $http.get("delete"+product.id)
		          .success(function(data){
		    	      $scope.products.splice(index, 1);
		            })
			      }
		  };


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI