angularjs_xeditable整合typeahead完成智能提示

标签：angularjs-xeditable   typeahead   

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

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

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

下面是页面上的html代码

<div ng-controller="productController">
<table class="table table-bordered table-condensed">
   <tr style="font-weight: bold">
         <td style="width:10%">类型</td>
         <td style="width:20%">名称</td>
         
      
      <td style="width:25%">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 style="white-space: nowrap">
        <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);
		            })
			      }
		  };

本文出自 “11134189” 博客，请务必保留此出处http://11144189.blog.51cto.com/11134189/1871754

angularjs_xeditable整合typeahead完成智能提示

标签：angularjs-xeditable   typeahead   

原文地址：http://11144189.blog.51cto.com/11134189/1871754