显示产品名称并在 ng.model 中仅插入 id答案

【问题标题】：Display the product name and insert only the id in ng.model显示产品名称并在 ng.model 中仅插入 id
【发布时间】：2017-09-27 10:11:32
【问题描述】：

我向你求助，因为我有一个小缺陷。我使用modal-select 从列表中选择一个项目。我查询所需的元素是元素的 id。什么是可操作的，使用此代码：

 <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>

但是在显示时，客户端，我想要元素的名称而不是 id，因为现在它是 id 出现在：

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

即使我这样做form.product.name

我受到了启发：

angular.module('starter', ['ionic', 'ionic-modal-select'])

.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.selectables = [
    1, 2, 3
  ];

  $scope.longList  = [];
  for(var i=0;i<1000; i++){
    $scope.longList.push(i);
  }

  $scope.selectableNames =  [
    { name : "Mauro", role : "black hat"}, 
    { name : "Silvia", role : "pineye"},
    { name : "Merlino", role : "little canaglia"},
  ];

  $scope.someSetModel = 'Mauro';

  $scope.getOpt = function(option){
    return option.name + ":" + option.role;
  };
  
  $scope.shoutLoud = function(newValuea, oldValue){
    alert("changed from " + JSON.stringify(oldValue) + " to " + JSON.stringify(newValuea));
  };
  
  $scope.shoutReset = function(){
    alert("value was reset!");
  };
  
}])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title></title>

    <link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
     <style>
    .option-selected{
        background-color: #ccc !important;
      }
    </style>
   
    <!-- ionic/angularjs js -->
    <script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
    <script src="https://rawgit.com/inmagik/ionic-modal-select/master/dist/ionic-modal-select.js"></script>


  </head>
<body ng-app="starter" ng-controller="MainCtrl">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic modal select example</h1>
      </ion-header-bar>
      <ion-content>
        <div class="item item-divider"></div>
        <div class="item item-text-wrap">
          List of numbers.
        </div>
        <div class="item item-body">
          <button class="button button-positive" modal-select="" ng-model="someModel" options="selectables" modal-title="Select a number">
            Select it
            <div class="option">
              {{option}}
            </div>
          </button>

          <button class="button button-positive" modal-select="" ng-model="someModel" options="selectables" modal-title="Select a number" has-search="true">
            Select it (with search)
            <div class="option">
              {{option}}
            </div>
          </button>


        </div>
        <div class="item">
          someModel: {{someModel}} 
        </div>

        <div class="item item-divider"></div>
        <div class="item item-text-wrap">
          Long list of numbers rendered with collection-repeat and custom header and footer set.
        </div>
        <div class="item item-body">
          <button class="button button-energized" modal-select="" ng-model="someOtherModel" options="longList" modal-title="Select a number" header-footer-class="bar-positive">
            Select it
            <div class="option">
              {{option}}
            </div>
          </button>

          <button class="button button-energized" modal-select="" ng-model="someOtherModel" options="longList" modal-title="Select a number" header-footer-class="bar-positive" has-search="true" sub-header-class="bar-positive">
            Select it (with search)
            <div class="option">
              {{option}}
            </div>
          </button>
        </div>
        <div class="item">
          someOtherModel: {{someOtherModel}}
        </div>


        <div class="item item-divider"></div>
        <div class="item item-text-wrap">
          List of objects with model bound to the option object
        </div>
        <div class="item item-body">
          <button class="button button-royal" modal-select="" ng-model="someObjModel" options="selectableNames">
            Select it
            <div class="option">
              <h2>{{option.name}}</h2>
              <p>{{option.role}}</p>
            </div>
          </button>
          <button class="button button-royal" modal-select="" ng-model="someObjModel" options="selectableNames" has-search="true">
            Select it (with search)
            <div class="option">
              <h2>{{option.name}}</h2>
              <p>{{option.role}}</p>
            </div>
          </button>
        </div>
        <div class="item">
          someUnSetModel: {{someObjModel}}
        </div>

        <div class="item item-divider"></div>
        <div class="item item-text-wrap">
          List of objects and model bound via `option-property` attribute. The initial value for this model is already set in the controller.
        </div>
        <div class="item item-body">
          <button class="button button-assertive" modal-select="" ng-model="someSetModel" options="selectableNames" option-property="name">
            {{ someSetModel || &apos;Select it&apos;}}
            <div class="option">
              <h2>{{option.name}}</h2>
              <p>{{option.role}}</p>
            </div>
          </button>
          <button class="button button-assertive" modal-select="" ng-model="someSetModel" options="selectableNames" option-property="name" has-search="true">
            {{ someSetModel || &apos;Select it&apos;}} (searchable!)
            <div class="option">
              <h2>{{option.name}}</h2>
              <p>{{option.role}}</p>
            </div>
          </button>
        </div>
        <div class="item">
          someSetModel: {{someSetModel}}
        </div>

        <div class="item item-divider"></div>
        <div class="item item-text-wrap">
          List of objects and custom getter function.
        </div>
        <div class="item item-body">
          <button class="button button-dark" modal-select="" ng-model="someThirdModel" options="selectableNames" option-getter="getOpt(option)" modal-title="Select">
            Select it
            <div class="option">
              <h2>{{option.name}}</h2>
              <p>{{option.role}}</p>
            </div>
          </button>
          <button class="button button-dark" modal-select="" ng-model="someThirdModel" options="selectableNames" option-getter="getOpt(option)" modal-title="Select" has-search="true">
            Select it - with search
            <div class="option">
              <h2>{{option.name}}</h2>
              <p>{{option.role}}</p>
            </div>
          </button>
        </div>
        <div class="item">
          someThirdModel: {{someThirdModel}}
        </div>

         <div class="item item-divider"></div>
        <div class="item item-text-wrap">
          Selection and reset callbacks
        </div>
        <div class="item item-body">
          <button class="button button-dark" modal-select="" ng-model="someFourthModel" options="selectableNames" on-select="shoutLoud(newValue, oldValue)" on-reset="shoutReset()" modal-title="Select">
            Select it
            <div class="option">
              <h2>{{option.name}}</h2>
              <p>{{option.role}}</p>
            </div>
          </button>
        </div>
        <div class="item">
          someFourthModel: {{someFourthModel}}
        </div>
        
        <div class="item item-body">
          <p>
            Repeat expression with filter
          </p>
        </div>
        <label class="item item-input">
          <span class="input-label">Filter</span>
          <input type="text" ng-model="externalFilter">
        </label>
        <div class="item item-body">
          <button class="button button-dark" modal-select="" ng-model="someSixthModel" options-expression="person in selectableNames | orderBy:'role' | filter : externalFilter" modal-title="Select">
            Select it
            <div class="option">
              <h2>{{option}}</h2>
            </div>
          </button>
          <button class="button button-dark" modal-select="" ng-model="someSixthModel" options-expression="person in selectableNames | orderBy:'role' | filter : externalFilter" modal-title="Select" has-search="true">
            Select it
            <div class="option">
              <h2>{{option}}</h2>
            </div>
          </button>
        </div>
        <div class="item">
          someSixthModel: {{someSixthModel}}
        </div>


      </ion-content>
    </ion-pane>
  </body>
</html>

http://codepen.io/bianchimro/pen/epYYQO?editors=101

这是我想要的结果的小图：

然后我需要搜索表单中的产品 id，其中 form.product 中的这个 id 将在参数中。

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

在我的控制器中：

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

这是我屏蔽的地方^^ 因为如果我使用我的搜索功能，它将接受产品的 id 和名称参数

提前感谢您的回答

【问题讨论】：

标签： angularjs select ionic-framework

【解决方案1】：

你可以把它作为一个属性来获取。如果selected（假设你的ng-model）是{"name": "London", id: 2}，你可以直接使用selected.id而不是selected。

在下面的代码 sn-p 中找到它的工作示例！（如果您愿意，也可以使用 forked codepen）

注意我是如何拥有这样的对象的数组：

{
  name: "Paris",
  id: 1
}

并且，我们将其作为options 传递给您的modal-select。现在，我们像这样使用它，

<div class="option">
  {{option.name}}
</div>

最后，在外部，我们像someModel: {{someModel.id}} 一样访问它，其中someModel 是您的ng-model。

angular
  .module("starter", ["ionic", "ionic-modal-select"])
  .controller("MainCtrl", [
    "$scope",
    function($scope) {
      $scope.selectableNames = [{
          name: "Paris",
          id: 1
        },
        {
          name: "London",
          id: 2
        },
        {
          name: "Milan",
          id: 3
        }
      ];
    }
  ])
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  });

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
  <style>
    .option-selected {
      background-color: #ccc !important;
    }
  </style>
  <script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
  <script src="https://rawgit.com/inmagik/ionic-modal-select/master/dist/ionic-modal-select.js"></script>
</head>

<body ng-app="starter" ng-controller="MainCtrl">
  <ion-pane>
    <ion-content>
      <div class="item item-divider"></div>
      <div class="item item-text-wrap">
        List of numbers.
      </div>
      <div class="item item-body">
        <button class="button button-positive" modal-select="" ng-model="someModel" options="selectableNames" modal-title="Select a number">
            Select it
            <div class="option">
              {{option.name}}
            </div>
          </button>
      </div>
      <div class="item">
        someModel: {{someModel.id}}
      </div>
    </ion-content>
  </ion-pane>
</body>

</html>

编辑：如果您的 search 只接受 id 而不是整个对象，您可以像这样重新映射它：

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

【讨论】：

然后我需要搜索表单中的产品 id，其中 form.product 中的这个 id 将在参数中。 <a class="button button-positive button-block" ng-click="search()">Search</a> 在我的控制器中：$scope.search = function () { AppService.searchProduct($scope.form).then(function(response){ $scope.listProduct = response; }); }; 这是我阻止的地方因为如果我使用我的搜索功能，它将接受参数 id 和产品名称
我也在尝试用这个离子插件做同样的事情一段时间。我试图检索 ID 只是为了能够在表单中使用它。知道产品名称仍会显示在表单中，但 ID 将在参数中
@AlexisCraig 你能把这些搜索相关的代码放在我的分叉代码笔中并在这里分享吗？我的理解是“您只想使用 Id 进行搜索，但您的 form.product 现在拥有整个对象”。对吗？
是的，现在 form.product 包含产品的名称和 ID。因此，如果我在search() 中使用我的函数，它将接受参数{"name": "Product", "id": 1}。虽然不幸的是我只需要 id 作为参数
@AlexisCraig 在这种情况下，你不能只是重新映射变量......就像$scope.somevariable = $scope.form.product.id并在search()中使用它吗？