显示产品名称并仅在ng.model

时间：2017-04-29 10:43:34

标签： angularjs select ionic-framework

我向你求助于我的一个小瑕疵。我使用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

以下是我想要的结果的小图表：

enter image description here

然后，我将在搜索表单中需要该产品的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和产品名称

提前感谢您的回答

1 个答案:

答案 0 :(得分：2)

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

在下面的代码段中找到相关的工作示例！（如果您愿意，可以选择forked codepen）

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

selected

并且，我们将其{ name: "Paris", id: 1 } 传递给您的options。现在，我们使用它，

modal-select

最后，在外面，我们访问<div class="option"> {{option.name}} </div> ，其中someModel: {{someModel.id}}是您的someModel。

＆＃13;
＆＃13; 
ng-model
＆＃13; 
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();
      }
    });
  });
＆＃13;
＆＃13;
＆＃13;

编辑：如果您的<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>只占用了ID而不是整个对象，则可以像这样重新映射：

search
相关问题
最新问题