angularjs_xeditable整合typeahead完成智能提示

大佬教程收集整理的这篇文章主要介绍了angularjs_xeditable整合typeahead完成智能提示，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

下面是页面上的HTML代码

<divng-controller="productController">
<tableclass="tabletable-borderedtable-condensed">
<trstyle="font-weight:bold">
<tdstyle="width:10%">类型</td>
<tdstyle="width:20%">名称</td>


<tdstyle="width:25%">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>

<tdstyle="white-space:Nowrap">
<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:$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);
		})
			}
		};

大佬总结

以上是大佬教程为你收集整理的angularjs_xeditable整合typeahead完成智能提示全部内容，希望文章能够帮你解决angularjs_xeditable整合typeahead完成智能提示所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。