angularjs-xeditable整合typeahead完成智能提示

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

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

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

下面是页面上的html代码

 1 <div ng-controller="productController">
 2 <table class="table table-bordered table-condensed">
 3    <tr style="font-weight: bold">
 4          <td style="width:10%">类型</td>
 5          <td style="width:20%">名称</td>
 6           
 7        
 8       <td style="width:25%">Edit</td>
 9     </tr>
10     <tr ng-repeat="product in products"> 
11       <td>     
12          <span editable-text="product.type" e-name="type" e-form="rowform" 
13          e-uib-typeahead="products.type  for products in products | filter:$viewValue | limitTo:8" 
14          e-typeahead-on-select="getProductDetail($item, $model)" 
15          >
16           {{ product.type || 'empty' }}
17         </span>
18       </td> 
19       <td>     
20          <span editable-text="product.name" e-name="name" e-form="rowform" >
21           {{ product.name || 'empty' }}
22         </span>
23       </td>     
24        
25       <td style="white-space: nowrap">
26         <form editable-form name="rowform" onbeforesave="saveProduct($data,product.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == product">
27           <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
28             save
29           </button>
30           <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
31             cancel
32           </button>
33         </form>
34         <div class="buttons" ng-show="!rowform.$visible">
35           <button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
36           <button class="btn btn-danger" ng-click="removeProduct($index,product)">del</button>
37         </div>  
38       </td>
39     </tr>
40   </table>
41   <button class="btn btn-default" ng-click="addProduc()">Add row</button>
42 </div>

Js代码

 1 //因为暂时未能解决$http的同步问题，所以只能取出所有数据，然后在匹配
 2             $http.get("selectAllProduct")
 3           .success(function(data){
 4               $scope.products=data;
 5           })     
 6          /*var xmlHttp; 
 7             此方法虽然能实现，但是页面数据有问题
 8             使用原生的XMLHttpRequest同步获取数据
 9           function createXMLHttpRequest(){  
10                 if(window.XMLHttpRequest){  
11             xmlHttp = new XMLHttpRequest();   
12                 }else if(window.ActiveXObject){  
13             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
14                 }  
15         }
16           $scope.getProducts=function(type){
17                createXMLHttpRequest();  
18                 if(xmlHttp!=null){  
19                   xmlHttp.open("GET","selectProductByType/"+type,false);  
20                 xmlHttp.send(null);  
21                }     
22              console.log(xmlHttp.responseText);
23               return xmlHttp.responseText;
24               
25           }*/
26   //获取产品详细信息           
27           $scope.getProductDetail = function ($item, $model) { 
28               $scope.inserted = {
29                       type: $model
30                       name: $item.name,
31               }
32               $scope.products[$scope.products.length-1]=$scope.inserted;
33           };
34    //保存产品
35           $scope.saveProduct= function(data,id) {
36            angular.extend(data, {id: id});
37             return $http.post('saveProduct', data);
38           };
39    //添加行
40           $scope.addProduct = function() {
41                
42             $scope.inserted = {
43               type: '',
44               name:''
45             };
46             $scope.esms.push($scope.inserted);  
47          }
48    //删除行  
49           $scope.removeProduct = function(index,product) {
50              if (confirm("你确定删除此行？")){
51                   $http.get("delete"+product.id)
52                   .success(function(data){
53                       $scope.products.splice(index, 1);
54                     })
55                   }
56           };

小结：

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

__EOF__

本文作者：Jun10ng
本文链接：https://www.cnblogs.com/wangzun/p/6088937.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！