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;
          })     
         /*var xmlHttp; 
            此方法虽然能实现，但是页面数据有问题
            使用原生的XMLHttpRequest同步获取数据
          function createXMLHttpRequest(){  
                if(window.XMLHttpRequest){  
            xmlHttp = new XMLHttpRequest();   
                }else if(window.ActiveXObject){  
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
                }  
        }
          $scope.getProducts=function(type){
               createXMLHttpRequest();  
                if(xmlHttp!=null){  
                  xmlHttp.open("GET","selectProductByType/"+type,false);  
                xmlHttp.send(null);  
               }     
             console.log(xmlHttp.responseText);
              return xmlHttp.responseText;
              
          }*/
  //获取产品详细信息           
          $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);
                    })
                  }
          };

 小结：

   关于如何使用$http完成同步获取数据的问题目前暂时未能解决