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);
		})
			}
		};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!