按照需求,需要在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);
})
}
};
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。