Angularjs_xeditable integration Typeahead Complete Smart Tips

According to the requirements, you need to add typeahead to the xeditable in Angularjs to complete the smart tip, and after the selection, the other information of the data is also displayed in this line, and then made a test change.

Of course, since the use of xeditable must be added to this module.

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

Here is the HTML code on the page

<div ng-controller= "Productcontroller" ><table class= "table table-bordered  Table-condensed ">   <tr style=" Font-weight: bold ">          <td style= "width:10%" > Type </td>          <td style= "width:20%" > Name </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>          &nbSp;      <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 Code

   //because of the temporary failure to resolve the $http synchronization problem, so can only take out all the data, and then in the matching               $http. Get ("Selectallproduct")   .success (function (data) {   $scope. Products =data;  })   //get product Details                        $scope .getproductdetail = function  ($item,  $model)  {                 $scope .inserted = {               type:  $model                name:  $item .name,               }              $ scope.products[$scope. products.length-1]= $scope. inserted;          };   //Preservation Products             $scope. Saveproduct= function (Data,id)  {    angular.extend (Data, {id: id});    return  $http. Post (' Saveproduct ',  data);       };   //Add line             $scope. Addproduct = function ()  {                    $scope. inserted =  {      type:  ',       name: '      };     $scope. Esms.push ($scope. Inserted);   }    //Delete Rows     $scope. Removeproduct = function (index,product)  { if  ( Confirm ("Are you sure to remove this existing security measure?") ")) {           $http. Get ("delete" +product.id)            .success (function (data) {            $scope. Products.splice (index, 1);             })       }  };

This article is from the "11134189" blog, please be sure to keep this source http://11144189.blog.51cto.com/11134189/1871754

Angularjs_xeditable integration Typeahead Complete Smart Tips