[SOLVED] Select modal Display the product name and insert only the id in ng.model

#1

I turn to you for a small flaw that I have. I used modal-select to select an item from a list. The element I need for the query is the id of the element. What is operational, with this code :slight_smile:

<div class="item item-body">
    <a class="button button-positive" modal-select="" ng-model="form.product" options="Product" option-property="id" modal-title="Select an product" has-search="true">
      Select it (with search)
      <div class="option">
        {{option.name}}
      </div>
    </a>
      <div class="item">
          Product : {{form.product}} 
      </div>
</div>

But on display, client side, I would like to have the name of the element and not the id, because for now it is the id that appears in :

<div class="item">
    Product : {{form.product}} 
</div>

And even if I do form.product.name

I was inspired by this: CodePen

Here is a small diagram of what I would like as a result :

Thank you in advance for your answers :slight_smile:

#2

you can do like this

  <a class="button button-positive" modal-select="" ng-model="form.product" options="Product" modal-title="Select an product" has-search="true">
  Select it (with search)
  <div class="option">
    {{option.name}}
  </div>
</a>

you get the one product object in form.product . In the saving time you can take id from form.product.id

#3

I will then need the id of the product in a search form, where this id in form.product will be in parameter.

<a class="button button-positive  button-block"  ng-click="search()">Search</a>

In my controller :

$scope.search = function () {
      AppService.searchProduct($scope.form).then(function(response){
          $scope.listProduct = response;
      });
    };

This is where I blocked ^^
Because if I use my search function, it will take in parameter the id and the name of the product

#4

Iā€™m also trying to do the same thing for a while, with this ionic plugin.

If I rely on this example, I try to get the ID only to be able to use it in a form. Knowing that the product name will still be displayed in the form, but that the ID will be in parameter

#5

The solution : :smiley:

$scope.search = function () {
  var myform = angular.copy($scope.form);
  myform.product = myform.product.id;
  AppService.searchProduct(myform).then(function(response){
    $scope.listProduct = response;
  });
};