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);
		            })
			      }
		  };
时间: 2024-08-24 05:51:49

angularjs_xeditable整合typeahead完成智能提示的相关文章

在ASP.NET MVC中使用typeahead.js支持预先输入,即智能提示

使用typeahead.js可以实现预先输入,即智能提示,本篇在ASP.NET MVC下实现.实现效果如下: 首先是有关城市的模型. public class City { public int Id { get; set; } public string Name { get; set; } public string PinYin { get; set; } } 在HomeController中响应前端请求返回有关City的json数据. public ActionResult GetCit

10 行 Python 代码实现模糊查询/智能提示

10 行 Python 代码实现模糊查询/智能提示 1.导语: 模糊匹配可以算是现代编辑器(如 Eclipse 等各种 IDE)的一个必备特性了,它所做的就是根据用户输入的部分内容,猜测用户想要的文件名,并提供一个推荐列表供用户选择. 样例如下: Vim (Ctrl-P) Sublime Text (Cmd-P) '模糊匹配'这是一个极为有用的特性,同时也非常易于实现. 2.问题分析: 我们有一堆字符串(文件名)集合,我们根据用户的输入不断进行过滤,用户的输入可能是字符串的一部分.我们就以下面的

如何让vue文件中的代码在Sublime Text 3中高亮和智能提示

大家写在Sublime Text 3中编写vue文件时,会发现没有代码智能提示,清一色的黑底白字,不会像html.js一样变成彩色,给我们带来了很大的不便.所以需要安装一款叫作Vue Syntax Highlight的插件,它不仅可以使代码高亮起来,还能进行代码智能提示.那怎样安装呢?分为以下几步: 安装Package Control 执行Install Package 安装Vue Syntax Highlight

Visual Studio 2013 智能提示

Visual Studio 2013中,智能提示功能突然用不了,查了一下,使用命令行重置VS的方法解决了这个问题.步骤如下: 开始菜单 -->所有程序-->Visual Studio 2013文件夹 --> Visual Studio Tools --> Developer Command Prompt for VS2013 输入DOS命令: CD Common7/IDE 进入到该工具下的子文件夹中 输入:devenv.exe /resetsettings ,重置Visual St

Eclipse设置智能提示

1.java智能提示 (1). 打开Eclipse,选择打开" Window - Preferences". (2). 在目录树上选择"Java-Editor-Content Assist",在右侧的"Auto-Activation"找到"Auto Activation triggers for java"选项.默认触发代码提示的就是"."这个符号. (3). 在"Auto Activation

Eclipse for android 实现代码自动提示智能提示功能

Eclipse for android 实现代码自动提示智能提示功能,介绍 Eclipse for android 编辑器中实现两种主要文件 java 与 xml 代码自动提示功能,解决 eclipse 代码提示失效.eclipse 不能自动提示.eclipse 没有代码提示的问题. 1.设置 java 文件的代码提示功能 打开 Eclipse 依次选择Window > Preferences > Java > Editor - Content Assist > Auto acti

搜索引擎关键字智能提示的一种实现

问题背景 搜索关键字智能提示是一个搜索应用的标配,主要作用是避免用户输入错误的搜索词,并将用户引导到相应的关键词上,以提升用户搜索体验. 美团CRM系统中存在数以百万计的商家,为了让用户快速查找到目标商家,我们基于solrcloud实现了商家搜索模块.用户在查找商家时主要输入商户名.商户地址进行搜索,为了提升用户的搜索体验和输入效率,本文实现了一种基于solr前缀匹配查询关键字智能提示(Suggestion)实现. 需求分析 支持前缀匹配原则 在搜索框中输入"海底",搜索框下面会以海底

eclipse完全支持jsp页面下HTML/JS/CSS智能提示

最近一直在学习java项目用到了eclipse和myeclipse,为了提高开发效率,我们时常会用到智能提示,而且不光要在java类中实现,在jsp中也要有同样的效果,下面看下怎么操作. 以myeclipse为例: 1.myeclipse--refrences--java--editor--content assist,点击apply 复制一下这一段:.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW 2.windows--prefrences-

Solr 智能提示(suggest)

电商搜索中要实现这么一块功能,当输入文字时候,下拉框提示.类似于百度搜索 在师出名门的基于lucene的solr搜索引擎中.提供了 拼写检查和智能提示这块功能.   拼写检查就是用来检查用户输入的检索内容是否存在,如果不存在则,给它提示出相近,或相似的内容.   而检索建议则是用户输入某个检索条件后,会立刻友好的给出一系列提示内容,并推荐首个出现的相似的词,作为推荐词. 也就是说 拼写检查是可以作为一个单独功能使用,但suggest一般引用拼写检查组件 实现过程,配置solrconfig.xml