角简单的选择问题 [英] Angular simple select issue

问题描述

我想它应该是一个常见的​​模式人们如何处理它，但我觉得很奇怪，为什么我不能在互联网上找到任何东西。

可以说我有对象的数组，我想在预输入窗口中显示这些对象的客户。当客户选择我想要的东西更应记住客户的选择和处理。

问题：客户可读格式显示的所有项目 - item.name （伦敦，里斯本，曼彻斯特）当客户选择的东西，我的 NG-模型 fromSelected 等于只是城市字符串名称，这意味着什么对我来说，因为我还需要 ID 用于进一步处理。

能否请你建议我怎么可以让 fromSelected 等于对象而不是字符串，但在同一时间提供了友好的输出用户？

  VAR应用= angular.module（飞）;app.controller（'PlaceController'，函数（$范围）{
$ scope.fromSelected ='';$ scope.getPlace =功能（）{  变种项= []
  items.push（{
        'ID'：1，
        '名'：伦敦
      }）;
  items.push（{
      'ID'：2，
      '名'：里斯本
      }）; 返回的物品;
};}）;
 

HTML

 ＆LT;输入类型=文本NG模型=fromSelected占位符=国家，城市或机场预输入=在getPlace place.name的地方（）预输入-loading =loadingLocations预输入-没有结果=noResults级=表格控＆GT;
 

解决方案

野山羊，

您的预输入句子可以为你做的。像项目作为item.name在数据项|过滤：$ viewValue

这主要是告诉你的键盘缓冲，以显示您 item.name ，但你的对象项目返回到模型

这 plunker 将帮助你这样做。

I assume it should be a common pattern how people deal with it, but I am surprised why I can't find anything on the internet.

Lets say I have array of objects and I want to display these objects for customer in typeahead window. When customer select something I want to remember customer choice and process further.

Problem: All items displayed in customer readable format - item.name (London, Lisbon, Manchester) When customer select something, my ng-model fromSelected equals just to city string name, which means nothing for me, because I still need id for further processing.

Could you please suggest how I can make fromSelected be equal to object rather than string but at the same time provide friendly output to user?

var app = angular.module("fly");

app.controller('PlaceController', function($scope) {


$scope.fromSelected ='';

$scope.getPlace = function() {

  var items = []
  items.push({
        'id': 1,
        'name': London
      });
  items.push({
      'id': 2,
      'name': Lisbon
      });

 return items;
};

});

HTML:

<input type="text" ng-model="fromSelected" placeholder="Country, city or airport" typeahead="place.name for place in getPlace()" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">

解决方案

Wild Goat,

your typeahead sentence can do that for you. like item as item.name for item in data | filter:$viewValue

This basically tells your typeahead to show your item.name, but to return your object item to the model

This plunker will help you doing that

这篇关于角简单的选择问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！