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完成同步获取数据的问题目前暂时未能解决