首页 > 代码库 > angularjs_xeditable整合typeahead完成智能提示
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; }) //获取产品详细信息 $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); }) } };
本文出自 “11134189” 博客,请务必保留此出处http://11144189.blog.51cto.com/11134189/1871754
angularjs_xeditable整合typeahead完成智能提示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。