按照需求,需要在angularjs的xeditable中加入typeahead,来完成智能提示,并且在选择后,把该条数据的其他信息也显示在此行中,于是做了一下的测试修改。
当然,既然用了xeditable肯定就需要加入这个模块。
var Myapp = angular.module('Myapp ',['xeditable']);
下面是页面上的html代码
<div ng-controller="productController"> <table class="table table-bordered table-condensed"> <tr > <td >类型</td> <td >名称</td> <td >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 > <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); }) } };
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。