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


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

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


下面是页面上的html代码

<divng-controller="productController"><tableclass="tabletable-borderedtable-condensed"><tr><td>类型</td><td>名称</td><td>Edit</td></tr><trng-repeat="productinproducts"><td><spaneditable-text="product.type"e-name="type"e-form="rowform"e-uib-typeahead="products.typeforproductsinproducts|filter:$viewValue|limitTo:8"e-typeahead-on-select="getProductDetail($item,$model)">{{product.type||'empty'}}</span></td><td><spaneditable-text="product.name"e-name="name"e-form="rowform">{{product.name||'empty'}}</span></td><td><formeditable-formname="rowform"onbeforesave="saveProduct($data,product.id)"ng-show="rowform.$visible"class="form-buttonsform-inline"shown="inserted==product"><buttontype="submit"ng-disabled="rowform.$waiting"class="btnbtn-primary">save</button><buttontype="button"ng-disabled="rowform.$waiting"ng-click="rowform.$cancel()"class="btnbtn-default">cancel</button></form><divclass="buttons"ng-show="!rowform.$visible"><buttonclass="btnbtn-primary"ng-click="rowform.$show()">edit</button><buttonclass="btnbtn-danger"ng-click="removeProduct($index,product)">del</button></div></td></tr></table><buttonclass="btnbtn-default"ng-click="addProduc()">Addrow</button></div>

Js代码

//因为暂时未能解决$http的同步问题，所以只能取出所有数据，然后在匹配$http.get("selectAllProduct").success(function(data){$scope.products=data;})//获取产品详细信息$scope.getProductDetail=function($item,$model){$scope.inserted={type:$modelname:$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);})}};