无法根据下拉选择将数据填充到字段中答案

【问题标题】：Not able to populate the data into the fields based on the dropdown selection无法根据下拉选择将数据填充到字段中
【发布时间】：2017-12-30 17:35:50
【问题描述】：

我对 Angular 尝试开发具有 CRUD 操作的应用程序有点陌生。我试图保留下拉列表的值以供进一步使用，并根据选择将数据填充到字段中。

无法根据下拉列表的选择将数据填充到字段中：如果我使用“product.id as product.name for product in listProducts”而不是 ng-options="product.name for product in listProducts "

提前感谢任何帮助

var myapp = angular.module("myModule", []);
myapp.controller("myController", function($scope){
var listProducts = [
		{ id: '100', name: "Macy", price: 200, quantity: 2 },
		{ id: '101', name: "JCPenny", price: 400, quantity: 1 },
		{ id: '102', name: "Primark", price: 300, quantity: 3 },
		{ id: '103', name: "H&M", price: 600, quantity: 1 }
	];
	
	$scope.listProducts = listProducts;
  
  });

<html ng-app="myModule">
	<head>
		<title> CRUD Operations </title>
		<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js></script>
		<script src="script.js"></script>
	</head>
	<body ng-controller="myController">
  Here i am populating the data into the fields without holding the id as the value in the dropdown which is successfull
  <div>
  <select ng-model=search ng-options="product.name for product in listProducts">
		</select>	
		<table>
			<thead>
				<tr>
					<th>Edit Information </th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>ID</td>
					<td>
						<input type="text" ng-model="search.id"/>
					</td>
				</tr>
				<tr>
					<td>Name</td>
					<td>
						<input type="text" ng-model="search.name"/>
					</td>
				</tr>
				<tr>
					<td>Price</td>
					<td>
						<input type="text" ng-model="search.price"/>
					</td>
				</tr>
			</tbody>	
		</table>
    </div>
   if i hold the id as value display the name in the dropdown , not able to populate the data into the fields 
<div>
<select ng-model=searchProduct ng-options="product.id as product.name for product in listProducts"></select>		
		<table>
			<thead>
				<tr>
					<th>Edit Information </th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>ID</td>
					<td>
						<input type="text" ng-model="searchProduct.id"/>
					</td>
				</tr>
				<tr>
					<td>Name</td>
					<td>
						<input type="text" ng-model="searchProduct.name"/>
					</td>
				</tr>
				<tr>
					<td>Price</td>
					<td>
						<input type="text" ng-model="searchProduct.price"/>
					</td>
				</tr>
			</tbody>	
		</table>
    </div>
    </body>
</html>

【问题讨论】：

为什么不能使用你描述的第一种方法？
@AlexandreNucera，我必须为我的 CRUD 操作保留并传递值（id）。请建议任何其他方法。提前致谢

标签： angularjs

【解决方案1】：

其实你快到了，

在您的控制器中，只需在您的范围内分配一个空变量来保存所选值：

var myapp = angular.module("myModule", []);
myapp.controller("myController", function($scope){
var listProducts = [
        { id: '100', name: "Macy", price: 200, quantity: 2 },
        { id: '101', name: "JCPenny", price: 400, quantity: 1 },
        { id: '102', name: "Primark", price: 300, quantity: 3 },
        { id: '103', name: "H&M", price: 600, quantity: 1 }
    ];

    $scope.listProducts = listProducts;
    $scope.selectedProduct = {};
  });

并将其绑定到选择：

 <select ng-model="selectedProduct" ng-options="product.name for product in listProducts">

现在，无论您在哪里需要该 ID，只需通过 $scope.selectedProduct.id 访问它

【讨论】：